Card on Photo

A ‘card’ on top of a full-width image.

Categories

Cards

Keywords

Preview

 Copy Pattern

This is not a card

This is a group block with a white background that looks like a card. Using the group block allows for more flexibility.

Button

Note: Live previews like this may not be actual size. All previews are limited to the width of the content area and are displayed with additional padding around them.

Notes

  • This pattern is a single cover block, and will expand to fill the horizontal space:
    • Use it outside of any other container for a full-width, call-to-action look
    • Use it inside a container block for a content-width feature area
  • The default is to have the card on the left at desktop sizes. The normal cover block controls can be used to move the card to the center, or the right side.
  • Note: The card will fill nearly the full width of the screen on mobile sizes. Keep this in mind when using images that prominently feature someone’s face; you should not expect to be able to see much of the image on mobile.

Pattern Markup