Hero sections built using only markdown

Hero banner. A self-contained content block where the image remains inside the content container, while the background color extends to both edges of the viewport on screens wider than 1280px, creating a structured yet visually expansive presentation.

<div class="hero">
![Hero](hero.webp)
</div>

Add text below the image in the same section

<div class="hero">
    <img src="hero.webp" alt="Hero banner">
    <div class="hero-caption">
        Lorem ipsum and what ever you want
    </div>
</div>

Full-bleed hero banner. A self-contained content block where the image stretches edge to edge across the full viewport width. Commonly used for impactful opening visuals that immediately grab attention.

<div class="herofull">
![Hero](hero.webp)
</div>

Image Carousel

:::carousel
![Caption 1](images/image1.jpg)
![Caption 2](images/image2.jpg)
:::

Image in a Heading

### ![icon](icon.svg) About the Project

Button-style Link

[Text](<https://address.com>){.btn-green}

Centering content

• Single image

![Text](image.jpg){.center}

• Green buttom

[Jump to](<https://url.com>){.btn-green .center}

• Any content (general block) — also paragraphs, headings, lists, multiple lines

:::center
This text is centered

![Image](image.jpg)
:::