Image
Zurich imagery focuses on things that will have the biggest impact: people in action, ready to changethe world. For complete brand guidance please visit Zurich BlueRoom.
Usage guidelines
When to use
- To help users understand the intent and context of the associated text.
When not to use
- If the quality of the images is not good enough.
- If the image does not express your message.
Writing guideline
Image caption
Caption goes below the image and should consist of a short and concise description of the image or topic.
Copyright
Please add short copyright information, if necessary.
Specifications
Anatomy
- Image
- Caption (optional)
- Copyright (optional)
Variants
Imagery can help users understand the intent and context of the associated text.
We have four image variants available. Each variant is available in four differet formats/sizes.
Sizes
We have four different image formats available.
The Full-Width Image can be used to draw attention, provide context about the content or highlight some product benefit.
The three other image formats have a fixed aspect ratio.
Extra Large
Large
Medium
Small
Behavior
Positioning
The Full Width images can be placed over the full width of the page.
The three other image formats with fixed aspect ratio should be placd in the content block and can sit to the left or right, on the top or on the bottom of the content to give visual support to a passage of the text.
The images are displayed as default with a width of 6 columns, but they can be proportionally resized (pressing Shift while resizing in Figma) to occupy between 3 and 9 columns of the corresponding viewport's grid. In mobile viewports, the Full Width image is placed over the full width of the screen. Images with fied aspect ratio are placed in full content (12 columns).
Usage Guidance
Focal Point
Make sure you position the image inside the frame in the right way: