--- title: Card subtitle: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card breadcrumb: - home - documentation - components - components-card meta: variables: true colors: false sizes: false --- {% 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 %}

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

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