<p>See <a href="/docs/markdown/components/components" title="Components 101">Components 101</a> to learn more about Mixa Components</p>
<p>Hero allows you to show a large box of content. It's usually used with <code>full-height</code> so that only the content of the hero is visible in the page before scrolling down</p>
<pre><code>:::hero
![](https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg)
## Welcome to Istanbul
As the largest city in Turkey, Istanbul is a city that blends the best of East and West. From the historic sites of the Old City to the trendy cafes and restaurants of Beyoglu, Istanbul is a city that offers a unique blend of culture, history, and modernity.
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><hero attrs="{}"><p><img src="https://cdn.pixabay.com/photo/2019/06/28/23/41/istanbul-4305164_960_720.jpg" alt=""></p><h2 id="welcome-to-istanbul"><a aria-hidden="true" tabindex="-1" href="#welcome-to-istanbul"><span class="icon icon-link"></span></a>Welcome to Istanbul</h2><p>As the largest city in Turkey, Istanbul is a city that blends the best of East and West. From the historic sites of the Old City to the trendy cafes and restaurants of Beyoglu, Istanbul is a city that offers a unique blend of culture, history, and modernity.</p></hero></div>
<h2 id="full-height"><a aria-hidden="true" tabindex="-1" href="#full-height"><span class="icon icon-link"></span></a>Full Height</h2>
<p>This automatically fills the height of the page. Usually full-height hero is used at the top of the page. (We are not using preview box in the following example so that you can see how it would look on the actual site)</p>
<pre><code>:::hero{full-height}
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
## Heading
Some text
:::
</code></pre>
<hero full-height="" attrs="{&#x22;full-height&#x22;:&#x22;&#x22;}"><p><img src="https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg" alt=""></p><h2 id="heading"><a aria-hidden="true" tabindex="-1" href="#heading"><span class="icon icon-link"></span></a>Heading</h2><p>Some text</p></hero>
<h2 id="cover-image"><a aria-hidden="true" tabindex="-1" href="#cover-image"><span class="icon icon-link"></span></a>Cover Image</h2>
<p>First image found in the component will be shown as the cover image if you enable <code>cover-image</code></p>
<pre><code>:::hero{cover-image}
![](https://cdn.pixabay.com/photo/2016/11/29/06/20/blonde-1867768_960_720.jpg)
## Heading
### sub heading
some text
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><hero cover-image="" coverImage="https://cdn.pixabay.com/photo/2016/11/29/06/20/blonde-1867768_960_720.jpg" attrs="{&#x22;cover-image&#x22;:&#x22;&#x22;,&#x22;coverImage&#x22;:&#x22;https://cdn.pixabay.com/photo/2016/11/29/06/20/blonde-1867768_960_720.jpg&#x22;}"><p></p><h2 id="heading-1"><a aria-hidden="true" tabindex="-1" href="#heading-1"><span class="icon icon-link"></span></a>Heading</h2><h3 id="sub-heading"><a aria-hidden="true" tabindex="-1" href="#sub-heading"><span class="icon icon-link"></span></a>sub heading</h3><p>some text</p></hero></div>
<h2 id="centered-text"><a aria-hidden="true" tabindex="-1" href="#centered-text"><span class="icon icon-link"></span></a>Centered text</h2>
<p>Hero component usually goes well with centered text. You can always use CSS classes to achieve that</p>
<pre><code>:::hero{.text-center}
![](https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg)
## Heading
Some text
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><hero class="text-center" attrs="{&#x22;class&#x22;:&#x22;text-center&#x22;}"><p><img src="https://cdn.pixabay.com/photo/2016/11/23/15/32/pedestrians-1853552_960_720.jpg" alt=""></p><h2 id="heading-2"><a aria-hidden="true" tabindex="-1" href="#heading-2"><span class="icon icon-link"></span></a>Heading</h2><p>Some text</p></hero></div>

Creating your site

Installing Mixa Obsidian Plugin

Setting up a Blog With Obsidian/Markdown

Blog

Resume

Using Mixa With Notion

Components

Carousel

Column

Hero

Video

Callouts

Image

Link

Math

Text

Site Editor

Setup

SEO and Analytics

Navigation

Code

Features

Theme

Sitemap and RSS

Search

Home Page

Scheduled Publishing

Static Files

Frontmatter

Quick Start

quick-start

templates

Notion

notion

components

Syntax

syntax

Markdown

markdown

site-editor

features

docs