Wide Card on Photo

A wide card, on the left, over a background image.

Categories

Cards

Keywords

columns row 

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 makes this a bit more flexible.

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 cover block and will expand horizontally to fill the available space:
    • Use outside any other container for a full-width, “call to action”
    • Use inside a container for a special feature section that is limited to the content area
  • This pattern uses a group block, and not an actual UDS card block
  • Because group expand to fill available space, we use an actual Bootstrap column to restrain the group from growing too wide:
    • Because of this, the “card” in this pattern can only be on the left on larger screen sizes
  • On mobile screens, the card area may fill most of the available content space and cover much of the image. If it’s important to still see someone’s face – for example – on mobile, you may want to consider a different approach.

Pattern Markup