Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Component Properties
  • Usage

Was this helpful?

  1. Components

Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

PreviousBreadcrumbNextCarousel

Last updated 8 months ago

Was this helpful?

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:

{%
  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,
  }
%}
Bootstrap docs