> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/card.md).

# Card

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/card/)

### Component Properties

The Card component takes a variety of properties to customize its appearance and content:

* `card_header` (optional): Text for the Card's header.
* `card_footer` (optional): Text for the Card's footer.
* `card_title` (optional): Text for the Card's title.
* `card_subtitle` (optional): Text for the Card's subtitle.
* `card_body` (optional): Main text for the Card's body.
* `card_media` (optional): Ideally to pass a media object to the card instead of an image, if used it will override the `card_image_src` and `card_image_alt` properties.
* `card_text` (optional): Additional text for the Card.
* `card_link_url` (optional): URL for the Card's link.
* `card_link_text` (optional): Text for the Card's link.
* `card_image_src` (optional): Source URL for an image on the Card.
* `card_image_alt` (optional): Alt text for the Card's image.
* `card_image_cap` (optional): Position for the Card's image cap (either 'top' or 'bottom').
* `card_image_overlays` (optional): Boolean value to determine if the card has image overlays.
* `card_body_tag` (optional): The HTML tag for the Card's body.
* `card_title_tag` (optional): The HTML tag for the Card's title.
* `card_subtitle_tag` (optional): The HTML tag for the Card's subtitle.
* `card_title_tag` (optional): The HTML tag for the Card's title.
* `card_text_tag` (optional): The HTML tag for the card text.
* `card_border` (optional): Set to true if the card should be borderless.
* `card_utility_classes` (optional): An array of additional CSS classes added to the card.
* `card_link_utility_classes` (optional): An array of additional CSS classes is added to the card link.
* `card_title_prefix` (optional): Corresponds to title\_prefix in entity templates.
* `card_title_suffix` (optional): Corresponds to title\_suffix in entity templates - typically used to print contextual links (make sure to add the 'contextual-region' class using card\_utility\_classes in this case).

### Usage

Here's an example of a basic Card component usage:

```twig
{%
  include 'radix:card' with {
    card_title_tag: 'h4',
    card_title: label,
    card_header: 'CARD HEADER',
    card_footer: 'The card footer',
    card_body_tag: 'div',
    card_body: 'This is the card body',
    card_text_tag: 'p',
    card_link_url: url,
    card_link_text: 'Read more...',
    card_border: false,
    card_utility_classes: [
      'col-4',
      title_suffix.contextual_links ? 'contextual-region',
    ],
    card_link_utility_classes: ['btn-primary'],
    card_media: content.field_media,
    card_image_cap: 'bottom',
    card_title_prefix: title_prefix,
    card_title_suffix: title_suffix,
  }
%}
```