--- title: Card actions page-header: Card actions menu: base.cards.actions ---

Sample card

{% include cards/body-placeholder.html %}

Card with action

{% include ui/button.html color="primary" icon="plus" text="Add new" %}
{% include cards/body-placeholder.html %}

Cart title

{% include ui/button.html icon="phone" text="Phone" %} {% include ui/button.html icon="mail" text="Email" %}
{% include cards/body-placeholder.html %}
{% assign person = site.data.people[0] %}
{% include ui/avatar.html person=person %}
{{ person.full_name }}
{{ person.job_title }}
{% include ui/button.html icon="phone" text="Phone" %} {% include ui/button.html icon="mail" text="Email" %}
{% include cards/body-placeholder.html %}

With description

Lorem ipsum dolor sit amet consectetur adipisicing.

{% include cards/body-placeholder.html %}

With description and action

Lorem ipsum dolor sit amet consectetur adipisicing.

{% include ui/button.html color="primary" text="Create new job" %}
{% include cards/body-placeholder.html %}
{% assign person = site.data.people[3] %}
{% include ui/avatar.html person=person %}
{{ person.full_name }}
{{ person.job_title }}
Edit user Change permissions Delete user
{% include cards/body-placeholder.html %}

Card actions

{% include ui/icon.html icon="refresh" %} {% include ui/icon.html icon="chevron-up" %} {% include ui/icon.html icon="dots-vertical" %} {% include ui/icon.html icon="x" %}
{% include cards/body-placeholder.html %}