Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Design

Card with no image

Image Modified

Card with an image

Image Modified

Card with an icon

Image Added

Card pulling a post (will also display featured image if there is one)

Image Modified

Card with stretch link and no CTAImage Modified

Card without stretch link and no CTA (no use cases yet)Image Modified

Use Cases

Use when displaying content.

...

  • You can adjust the ratio of the image. Default ratio is 16x9.
  • Icon
    • This option should be selected when svg icons are added to the image field of the cards
    • This will style the icon so that it is centered vertically and horizontally in the top of the card
    • It also adds a subtle gray accent line (or <hr>) below the icon
    • Note: do not mix icons and photos in cards within the same block; a cards within the same group should have icons or no images OR photos or no images

Stretch Link

  • Check to add hover effect to the card and make whole card clickable.

...