Intro

The media block feature enables cards to spotlight special content for the user. Media blocks are usually used in two ways:

  1. Media on a card
    The media block is used to spotlight special content, with an image or headline on a solid background.
  2. Media as a banner
    The media block is used as a standalone banner, with an image or colored background combined with a text layer.

Media block variants and examples

Media block variants and examples

When to Use

Do

  • To ensure legibility and to comply with accessibility standards, always make sure that the contrast ratio in your media block or banner is sufficient. You can check contrast ratios using the Color Contrast Analyzer (external tool).

Don't

  • Don’t combine text with an image if the media block is used together with other card blocks.
  • Don’t use a transparent background for the text area.

Examples

Ensure sufficient contrast between the text and background colors of a media block.

Ensure sufficient contrast between the text and background colors of a media block.

Insufficient contrast between the text and background colors of a media block

Insufficient contrast between the text and background colors of a media block

For a media block on a card, use either an image or a text with a solid background color.

For a media block on a card, use either an image or a text with a solid background color.

Don’t combine text and an image in a media block on a card.

Don’t combine text and an image in a media block on a card.

Use a solid background color for the text area of a banner and ensure sufficient contrast.

Use a solid background color for the text area of a banner and ensure sufficient contrast.

Don’t use a transparent background for the text area of a banner.

Don’t use a transparent background for the text area of a banner.

Anatomy

Media on a Card

Anatomy: Media on a card - image example

Anatomy: Media on a card - image example

Anatomy: Media on a card - text example

Anatomy: Media on a card - text example

  1. Media block:
    In combination with other card blocks, the media block can only contain an image/graphic (A) OR a solid color plus text (B).
  2. Image or transparent graphic in the media block: Used to decorate and highlight the card. In this case, we don’t recommend adding text content on top.
  3. Text in the media block: Additional headline to emphasize the subject of the card. In this case, you need to add a solid-colored background to the media block to comply with accessibility standards. The background and text colors must fulfill the contrast ratio requirements (see Accessibility wiki), and can use existing parameters.
guideline
Don’t duplicate the card title in the headline of the media block.

Media as a Banner

Anatomy: Media as a banner - example with image and text layer

Anatomy: Media as a banner - example with image and text layer

  1. Media block:
    The media block of the card can apply a background color.

  2. Image layer (optional): This layer can be an image or a transparent graphic.

  3. Text layer (optional): To comply with accessibility standards, you need to add a solid colored background to the text layer. The background and text colors must fulfill the contrast ratio requirements (see Accessibility wiki), and can use existing parameters.

    1. Headline (optional): Describes the subject of the banner.
    2. Byline (optional): Provides additional information on the subject.
    3. Button (optional): Triggers the action.

Behavior and Interaction

Actions in the Media Block

The positioning of actions depends on how you are using the media block.

  1. Media on a card:
    The media block has no actions. Actions are placed in the card header or footer.
  2. Media as a banner:
    You can add one or more actions in the text layer of the banner. Clicking the button triggers the event or navigation to a detail view.
guideline
Don’t place actions in a media block that is used in conjunction with other card blocks. In this case, the media block is mainly used for decoration and to highlight content. Place actions on the card header or footer instead.
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

Actions in the media block

Actions in the media block

Responsive Behavior

Media on a Card

Responsive behavior of a media block with an image

Responsive behavior of a media block with an image

Responsive behavior of a media block with a headline

Responsive behavior of a media block with a headline

Media block with an image: If the card is resized, the image resizes proportionally.
Media block with a headline: If resizing the card reduces the width of the card, the text always wraps (no truncation). The height of the card increases accordingly.

Media as a Banner

Responsive behavior of a banner with an image layer

Responsive behavior of a banner with an image layer

Responsive behavior of a banner without an image layer

Responsive behavior of a banner without an image layer

Banner with an image layer: If the size of the card is reduced, the decorative content always shrinks first. The information in the text layer must always be shown.

If the image and content can no longer be displayed side by side, the card switches to a vertical layout and the card height adapts accordingly (breakpoint: 4 columns).

Banner without an image layer: If the size of the card is reduced, the background shrinks first. Once the width reaches the width of the text layer, the text layer shrinks together with the background and the height of the card adapts accordingly.

Components

Specifications