---
type: "Components"
category: "Other"
parent: "Hero"
title: "Hero"
description: "Hero is a component to style complex boxed content."
---

## Usage

Assing the desired `min-height` instead of `min-h-screen`, assing the desired `max-width` instead of `max-w-2xl`,

> This demos use [media](/components/media) see documentation for more info.

<demo>
  <div class="docs_demo_item" data-iframe="demos/components/hero/usage">
  </div>
</demo>

## Direction

Use **Tailwind CSS** to customize **content direction**.

<demo>
  <div class="docs_demo_item" data-iframe="demos/components/hero/direction">
  </div>
</demo>

## Shadow

Use **Tailwind CSS** to **add shadow**.

<demo>
  <div class="docs_demo_item" data-iframe="demos/components/hero/shadow">
  </div>
</demo>

## Outside

Use **Tailwind CSS** to **position content outside**.

<demo>
  <div class="docs_demo_item" data-iframe="demos/components/hero/outside">
  </div>
</demo>
