---
title: "Hero"
canonical: https://sky-ui.cf.sky.com/sections/hero
---

# Hero

## Purpose

The Hero Section is a prominent, visually engaging component used to introduce key content or messaging at the top of a page. Maintaining consistent hero sections across the site helps reinforce brand identity and ensures a cohesive user experience.

## Anatomy

The Hero Section can be broken down into the following elements -

## Variants & States

- Breakpoints: Mobile, Desktop

- Type: Text, Standard (Centre and Left Alignment), Split (Left and Right Alignment), Carousel, Immersive

- Scrim: On, Off

### Mobile - Standard

### Desktop - Standard