Card
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Last updated
Was this helpful?
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Last updated
Was this helpful?
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).
Here's an example of a basic Card component usage: