# 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,
  }
%}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.