Skip to content

Website

Hero sections

The hero header section is usually the first thing users see when arriving on a website. It only takes a second for users to form an opinion about a website, so it’s important for us to make sure that the hero header is clear and easy to understand. The hero section on the DMCC site is assigned based on the page hierarchy: Pillar, Parent and Child.

Pillar page

img-branding-website-hero-pillar

Size constraints
Fixed height and content bottom aligned

  • Mobile (XS): 420px
  • Desktop (XL): 600px
  • Desktop (XXL): 600px

Content

  • No breadcrumbs
  • Title eyebrow (optional)
  • H1
  • P text (optional)

Background assignment
Option for video/image

Parent page

img-branding-website-hero-parent

Paddings

  • Mobile: 64px top; 40px bottom padding
  • Desktop: 64px top bottom padding

Content

  • No breadcrumbs
  • Title eyebrow (optional)
  • H1
  • P text (optional)

Background assignment
Option for video/image

Child page

img-branding-website-hero-child

Paddings

  • Mobile: 64px top; 40px bottom padding
  • Desktop: 64px top bottom padding

Content

  • No breadcrumbs
  • Title eyebrow (optional)
  • H1
  • P text (optional)

Background assignment
Fixed image background.

Background image file can be found on HubSpot under o2-Website 2023 Assets > o2-Website 2023 Design Assets > defaults > img-header-default-bg or go here.

All rights reserved. Copyright DMCC ©2025