> For the complete documentation index, see [llms.txt](https://docs.lightningrails.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lightningrails.com/ui-components/heros.md).

# Heros

### Hero center

<figure><img src="/files/OjgRfakaWzzb3Lq8EEv9" alt=""><figcaption><p>Hero section central</p></figcaption></figure>

To add a beautifully designed Hero section to your landing page, copy and paste this line of code where you need this section to appear in your html.erb page:

<pre><code><strong>&#x3C;%= render "components/hero" %>
</strong></code></pre>

### Hero with background

<figure><img src="/files/7M3ae1wZDsd7wTShyWsl" alt=""><figcaption></figcaption></figure>

To add the Hero section with a background frame, copy and paste this code:

```
<%= render "components/hero_bg" %>
```

### Hero image split

<figure><img src="/files/XAwz95jXLD6CPESub4cp" alt=""><figcaption><p>Hero with image</p></figcaption></figure>

To add the Hero section with a background frame and a split view with image, copy and paste this code:

```
<%= render "components/hero_split" %>
```

***

### See more Hero designs:

* [HyperUi Hero](#user-content-fn-1)[^1]
* [DaisyUI Hero](https://daisyui.com/components/hero/)

[^1]: <https://www.hyperui.dev/components/marketing/banners>