Kickstand UI

# Card

Kickstand UI's card component is a great way to associate media with your content as well as call out supplemental content for your main content.

"It's never too early for ice cream, Jim. But we didn't have any ice cream, so this is mayonnaise and black olives. It's comfort food, alright?" Get One
<ks-card
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    >
    <ks-card-body
        card-title="Meditation Moment"
        card-subtitle="Comfort Food"
        >
        "It's never too early for ice cream, Jim. But we didn't have any ice cream, so this is mayonnaise and black olives. It's comfort food, alright?"
    </ks-card-body>
    <ks-card-footer>
        <ks-button>Get One</ks-button>
    </ks-card-footer>
</ks-card>

The Kickstand UI Card component is comprised of three tags: <ks-card>, <ks-card-body>, and <ks-card-footer>. Both the <ks-card-body> and <ks-card-footer> are completely optional but come with some nice features your users will appreciate including semantics and accessibility roles.

# Image Direction

# Top (default)

Get One
<ks-card 
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    img-direction="top"
    >
...
</ks-card>

# Bottom

Get One
<ks-card
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    img-direction="bottom"
    >
...
</ks-card>

TIP

Since images are very good about drawing the user's attention, it is usually best practice to lead with an image to attract them to your content, rather than end with an image.

# Left

Get One
<ks-card
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    img-direction="left"
    >
...
</ks-card>
Get One
<ks-card
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    img-direction="right"
    >
...
</ks-card>

# Behind

"It's never too early for ice cream, Jim. But we didn't have any ice cream, so this is mayonnaise and black olives. It's comfort food, alright?" Get One
<ks-card
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    img-direction="behind"
    >
...
</ks-card>

WARNING

As you can see, having text directly over an image can make the text difficult to read. Additional text shadowing has been added to the text to make the text more legible, but you will still need to be careful as you use this feature.

# Href

Adding this attribute will make the image clickable.

"It's never too early for ice cream, Jim. But we didn't have any ice cream, so this is mayonnaise and black olives. It's comfort food, alright?" Get One
<ks-card
    href="#"
    img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    >
...
</ks-card>

# Clickable

When the clickable attribute is added, the entire card will now be clickable

"It's never too early for ice cream, Jim. But we didn't have any ice cream, so this is mayonnaise and black olives. It's comfort food, alright?" 
<ks-card
    href="/components/images.html"
    clickable img-src="/images/demo/michael_scott.jpg"
    alt="Michael Scott"
    >
...
</ks-card>

# Title and Subtitle

<ks-card>
    <ks-card-body
        card-title="Meditation Moment"
        card-subtitle="Comfort Food"
        >
    </ks-card-body>
</ks-card>

Adding these attributes will add a <header> element to the body of the card to wrap the title and subtitle.

# Accessibility

# ks-card

Since cards tend to be stand-alone content from the main content, the <ks-card> element has the role="article" attribute.

# ks-card-body

When using the card-title and card-subtitle attributes, they will be wrapped in a <heading> tag to provide good semantics and structure for assistive technologies.

The footer has the role="contentinfo" attribute added to it to provide assistive technologies with a landmark to let it know they have reached the end of the article and there is additional information or links that pertain to it.

# Properties

# <ks-card>

Property Attribute Type Default Description
imgSrc img-src string undefined URL for card image
alt alt string undefined alt text for image
lazy lazy boolean undefined whether or not the card image is lazy-loaded
threshold threshold number 300 how soon the lazy-loaded image should load before the component enters the viewport (in pixels)
imgDirection img-direction top, bottom, left, right, or behind top position of image in relation to the content
href href string undefined if url is added, the image will become clickable
clickable clickable boolean undefined if true,the entire card will become clickable and link to the location defined in the href attribute
height height number undefined sets the height attribute on the img element
width width number undefined sets the width attribute on the img element
aspectRatio aspect-ratio string undefined sets the width and height attribute on the img element based on

# <ks-card-body>

Property Attribute Type Default Description
cardTitle card-title string undefined sets the card title
cardSubtitle card-subtitle string undefined sets the card subtitle

There are no custom properties for the <ks-card-footer> element.

← Carousel →