Image blocks

Variants of the image-block element with different positioning of image, title, and text — placed above or below the rest of the content.

Image only

A pure image element with no accompanying text.

Image and text

Image above, below, to the left, or to the right of a text paragraph.

Image above

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image below

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image left

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image right

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image, title, and text

Image above, below, to the left, or to the right of a title and text — for more detailed content.

Image above

SAP insurance solutions

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image below

SAP insurance solutions

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image left

SAP insurance solutions

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image right

SAP insurance solutions

Years of experience implementing SAP insurance solutions for clients in Switzerland and Germany.

Image fit

Controls how the image fills its frame: 'cover' crops the image, 'contain' shows the whole image within the frame.

cover

contain

With bullet list and link

An additional bullet list and a further link, internal or external — the arrow icon and target/rel attributes adjust automatically.

Internal link

SAP insurance solutions

  • SAP S/4HANA migration
  • Custom insurance modules
  • Ongoing support and maintenance
Learn more

External link

SAP insurance solutions

  • SAP S/4HANA migration
  • Custom insurance modules
  • Ongoing support and maintenance
Visit sap.com (opens in a new tab)

Best practices

Choose cover vs. contain deliberately

Use 'cover' for even grid layouts with cropped images; use 'contain' only when the whole image must stay visible (e.g. logos, diagrams).

Keep bullet lists short

Three to five short points are enough — longer lists break the block's compact shape.

Only one link per block

An image block should have at most one further link, otherwise the intended action becomes unclear.