--- title: Card layout: documentation doc-tab: components doc-subtab: card --- {% capture card_example %}
Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
{% endcapture %} {% capture card_header_example %}

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
{% endcapture %} {% capture card_title_example %}

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood

{% endcapture %} {% include subnav/subnav-components.html %}

Card

An all-around flexible and composable component

{% include meta.html variables=true colors=false sizes=false %}

The card component comprises several elements that you can mix and match:

  • card: the main container
    • card-header: a horizontal bar with a shadow
      • card-header-title: a left-aligned bold text
      • card-header-icon: a placeholder for an icon
    • card-image: a fullwidth container for a responsive image
    • card-content: a multi-purpose container for any other element
    • card-footer: a horizontal list of controls
      • card-footer-item: a repeatable list item
New 0.5.3

You can center the card-header-title by appending the is-centered modifier.


{{card_example}}
{% highlight html %}{{card_example}}{% endhighlight %}

{{card_header_example}}
{% highlight html %}{{card_header_example}}{% endhighlight %}

{{card_title_example}}
{% highlight html %}{{card_title_example}}{% endhighlight %}
{% include variables.html type='component' %}