Icon and text
A compact icon above a short title and text — e.g. for a services overview.
SAP Financials
Consulting on implementing and optimizing SAP financial modules.
Business Intelligence
Building reporting and analytics solutions for informed decisions.
Data security
Protecting sensitive customer and insurance data throughout the project.
Image and text
Image above or below the title and text, depending on the desired emphasis.
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.
Title and links
A title with a short list of further links — e.g. for a resource overview.
Without description
With description
Buttons
All button roles (Primary, Secondary, Positive, Negative, Tertiary) in the brand colors.
Stat
A type added from common practice: a highlighted number with a caption, frequently used on company pages.
20+
Years of experience
Best practices
Consistent grid
Within one grid, all tiles should use the same type and the same height — mixing icon, image, and link tiles in the same row looks inconsistent.
Meaningful alt text
Image tiles need a descriptive alt attribute when the image carries meaning. If the image is purely decorative, alt="" is enough.
Make the whole tile clickable
If a tile leads to exactly one destination, the whole surface should be clickable (not just a small link at the end) — this enlarges the click target, especially on touch devices.
Mark external links
External targets open in a new tab (target="_blank" rel="noopener noreferrer") and automatically show the arrow-up-right icon instead of arrow-right.