Arla Global Platform - CVI

Hero block

The Hero block is a highly configurable block for introducing important landing pages on the website.

Example 1

Hero block heading

Background image and foreground image (logo)
Button
Example 2

Solid background

Default aligned heading and default font (not strong)
Button
Example 3

Video background

Upload MP4 video and place in block settings. Video is autoplayed without a sound.

Details

Options

  • Center and left content alignment
  • Background video, image or solid color
  • Exclusion/inlcusion of one or more elements
  • Optional semi-transparent background gradient to ensure better text contrast on imagery

Image specifications

  • Images should be photography or other imagery with a background.
    • Photography should be in JPG format at a minimum of 80% compression.
    • Illustrations should preferably be in PNG format to avoid blurring hard edges.
  • Images should be at least 2000px wide at 72 dpi
  • Images will be cropped dynamically at different break points, so they should be around a 16:9 aspect ratio to provide the best coverage of the container.
  • Important areas of the image should be centered if possible, to ensure visibility in mobile view. If the text is aligned left, then important areas should be slightly right of center.

Do’s & Dont’s

  • DO: Keep summary text to one or two short sentences.
  • DO: Check picture on mobile also
  • DON'T: put too big picture