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

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

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

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.