Card¶

A flexible content container: an image, eyebrow, title, subtitle, body and one link.

Examples¶

Basic, image overlay, and grouped into a Card Group.

BasicOverlayGroup

Usage

{% include 'bootstrap_components:card' with {
  title: 'Card title',
  body: {'#markup': "<p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's content.</p>"},
  image_src: 'https://placehold.co/600x400?text=Image+cap',
  image_alt: 'Placeholder card image',
  link_url: '#',
  link_text: 'Go somewhere',
} %}

Places content over the image instead of below it.

Usage

{% include 'bootstrap_components:card' with {
  variant: 'overlay',
  title: 'Card title',
  body: {'#markup': '<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p><p class="card-text"><small>Last updated 3 mins ago</small></p>'},
  image_src: 'https://placehold.co/600x400?text=Image',
  image_alt: 'Placeholder card image',
} %}

Multiple Card components dropped into a Card Group's cards slot render as a single attached element with equal width and height columns.

Usage — see Card Group below.

Props¶

Prop	Type	Description	Example
`variant`	string	`default`, `horizontal` or `overlay`. Overlay and horizontal fall back to `default` without an image. Defaults to `default`.	`default`
`title`	string	Card title. Plain text.	`Card title`
`subtitle`	string	Card subtitle. Plain text.	`Card subtitle`
`body`	string (HTML)	Rich content below the title and subtitle, e.g. a paragraph or a button. Pass a render array or Markup object to render HTML from Twig.	`<p>Supporting content.</p>`
`link_url`	string	Where the card's link goes.	`/about`
`link_text`	string	Text for that link. Defaults to `Learn more`.	`Read more`
`color_scheme`	string	`light` or `dark`. Dark renders the card in Bootstrap's dark color mode. Defaults to `light`.	`light`
`image`	object	The card image, chosen with the Canvas image picker. Twig callers can pass `image_src` and `image_alt` instead.
`eyebrow`	string	Small label shown above the title.	`Featured`
`heading_level`	integer	Heading level for the title (2–6); the subtitle uses one level down. Defaults to `5`.	`5`
`image_position`	string	`top` or `bottom`. Default variant only.	`top`
`image_width`	string	Horizontal variant only: the image column's width from the lg breakpoint, `4` (one third, default), `3` (one quarter) or `6` (one half).	`4`

Variants¶

Variant	Description
`default`	Standard stacked card: image, then body, top or bottom.
`horizontal`	Image and body side by side in a row.
`overlay`	Image with content layered on top of it (`.card-img-overlay`).

Card Group¶

Use Card Group to render a set of Card components as a single, attached element with equal width and height columns. Card groups start stacked and become attached with uniform dimensions starting at the sm breakpoint.

View on getbootstrap.com

{% embed 'bootstrap_components:card_group' %}
  {% block cards %}
    {% include 'bootstrap_components:card' with { title: 'Card title', body: '...' } %}
    {% include 'bootstrap_components:card' with { title: 'Card title', body: '...' } %}
    {% include 'bootstrap_components:card' with { title: 'Card title', body: '...' } %}
  {% endblock %}
{% endembed %}

Slots¶

Slot	Description
`cards`	Drop Card components here. They render as a single attached group with equal width and height.