Header Puffs Example

<div class="container-fluid mx-0 px-0 nav-undecorated">
    <div id="carousel-example" class="carousel slide" data-bs-ride="false">
        <div class="carousel-inner" tabindex="0">
            <div class="carousel-item active">
                <a href="../../#slide1-target.html" class="nav-block h-100" tabindex="-1">
                    <div class="carousel-img-container">
                        <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Slide 1 image" class=" carousel-img">

                    </div>
                    <div class="carousel-caption">
                        <p>
                            <span class="a nav-block-link">Slide 1&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                        </p>
                    </div>
                </a>
            </div>
            <div class="carousel-item ">
                <a href="../../#slide2-target.html" class="nav-block h-100" tabindex="-1">
                    <div class="carousel-img-container">
                        <img src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x, ../../images/_content/placeholder_2@2x.jpg 2x" alt="Slide 2 image" class=" carousel-img">

                    </div>
                    <div class="carousel-caption">
                        <p>
                            <span class="a nav-block-link">Slide 2&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                        </p>
                    </div>
                </a>
            </div>
            <div class="carousel-item ">
                <a href="../../#slide3-target.html" class="nav-block h-100" tabindex="-1">
                    <div class="carousel-img-container">
                        <img src="../../images/_content/placeholder_3@1x.jpg" srcset="../../images/_content/placeholder_3@1x.jpg 1x, ../../images/_content/placeholder_3@2x.jpg 2x" alt="Slide 3 image" class=" carousel-img">

                    </div>
                    <div class="carousel-caption">
                        <p>
                            <span class="a nav-block-link">Slide 3&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-example" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Föregående</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel-example" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Nästa</span>
        </button>
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="1" class="" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="2" class="" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-controls-container">
            <div class="carousel-controls">
                <button class="btn rounded-0 border-0 carousel-controls-pause"></button>
            </div>
        </div>
    </div>
</div>

<div class="pt-5 pb-5 ">
    <div class="row g-0">
        <div class="col-sm-12">
            <div class="row g-0">

                <div class="col-12 col-lg-4 pe-lg-3">
                    <a href="#" class="nav-block masonry-tile-img">
                        <div class="masonry-tile-img-bg">
                            <img alt="[object Object]" src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x,
                /images/_content/placeholder_1@1x.jpg 2x">
                        </div>
                        <div class="masonry-tile-img-content">
                            <div class="blockline">
                                <h2>
                                    <span class="a nav-block-link">Bildtitel
                                        <i class="fal fa-chevron-circle-right fa-sm"></i>
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-lg-4 px-lg-2">
                    <a href="#" class="nav-block masonry-tile-img">
                        <div class="masonry-tile-img-bg">
                            <img alt="[object Object]" src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x,
                /images/_content/placeholder_2@1x.jpg 2x">
                        </div>
                        <div class="masonry-tile-img-content">
                            <div class="blockline">
                                <h2>
                                    <span class="a nav-block-link">Bildtitel
                                        <i class="fal fa-chevron-circle-right fa-sm"></i>
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-lg-4 ps-lg-3">
                    <a href="#" class="nav-block masonry-tile-img">
                        <div class="masonry-tile-img-bg">
                            <img alt="[object Object]" src="../../images/_content/placeholder_3@1x.jpg" srcset="../../images/_content/placeholder_3@1x.jpg 1x,
                /images/_content/placeholder_3@1x.jpg 2x">
                        </div>
                        <div class="masonry-tile-img-content">
                            <div class="blockline">
                                <h2>
                                    <span class="a nav-block-link">Bildtitel
                                        <i class="fal fa-chevron-circle-right fa-sm"></i>
                                    </span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>