Cards

Recommended modules: 
- enhanced_button_link
- button_link

These modules wok alongside some template overrides and config available to allow for bootstrap button style overrides and icons to be inserted

Cards take a number of fields and will display differently depending on what ones you provide.

Header: Sits at the top of the card (or under an image if present), and is blue. The colour will be over-ridden though if a full coverage card colour is picked.

Title: Large (H5) text title that is grouped with the summary

Summary: Plain text block

Link: A link styled as a button, you can choose the button styles.

Text_background: Defines a full coverage card colour, the text will update (to black or white) to retain contrast (this is a useful accessibility inclusion of the bootstrap text-bg helper classes).

There are multiple ways to generate a card in the system. 

• Use the card-group display mode on the card-group Paragraph type (or copy and rename the twig files into the namespace of alternative drupal entities)
• Use the bootstrap card wrapper field-group when configuring a display mode for another entity type
• Use the datacard entity and its Flipcard and Datacard display modes
• Create custom twig files or HTML to match any custom card needs
   

Minimum markup required by twig or manual entry is as follows:

<div class="card">
Optional image
     <img src="[path to image]"  loading="lazy" class="img-fluid rounded">
Optional header
     <div class="card-header text-bg-[colour]"> text-bg classes are optional, but best practice is to default to text-bg-primary if no card-body background colour, but should match the colour of the card-body if adding a card background colour.
          [Header Text]
     </div>
     <div class="card-body mt-2 text-bg-[colour]">
Card title.
         <h5 class="heading mb-3">
              [Title Text]
         </h5>
Optional Card text
         <p class="card-text fs-6">
              [Card body text]
         </p>
Optional button. Should default to primary for colour, and lg for size. btn-outline-[colour] can also be used to create an outlined button
Icons can also be inserted before the text if required
         <a href="[url]" class="btn btn-[colour] btn-[size]">Optional Icon markup goes here[Link Text]</a>
    </div>
</div>