--- layout: documentation doc-tab: components doc-subtab: card variables: - name: $card-color value: $text - name: $card-background-color value: $white - name: $card-shadow value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) - name: $card-header-color value: $text-strong - name: $card-header-shadow value: 0 1px 2px rgba($black, 0.1) - name: $card-header-weight value: $weight-bold - name: $card-footer-border-top value: 1px solid $border --- {% 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-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 reponsive 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

{{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 %}