Simple – Cards
Key point: Display content as a styled card.

You may use a column to define the size of the card.

Card

  • Fragment label: card
  • Fragment label: card-flat
  • Fragment label: card-elevated
  • Fragment label: card-transparent
  • Fragment label: card-transparent-bg-dark
  • Fragment label: card-float

Cards can have:

  • Image – must be the first content in the card fragment, and:
    • must use one of the block labels listed for card-image.
    • only one image per card. 
  • Image Link OR Xref – must be first content inside one of the available card-image block labels. Users can then click the image to go to the target – the link text doesn’t display. Images inside cards cannot have a caption.
  • Heading to be the card title – optional and only one, following the card-image block label. The heading is accepted as the card title and displays following the image. 
  • Any other content is displayed after the card title.

Be careful as complex content in a card may break your layout!

Card image

Inside the card fragment, as the first element of the fragment, enclose the image (and xref/link if used) in one of the following aspect-ratio block labels:

  • Block label: card-image-16x9
  • Block label: card-image-25x36
  • Block label: card-image-1x1
  • Block label: card-image (original image ratio)

See in action

View cards demo.