Panel alternative appearance

A full-width coloured panel used to emphasise or pick out particular blocks of content on a page.

<section class="course-structure bg-granite medium-padding" id="course-structure">
    <div class="row column">
        <!-- COMPONENT: Alternative Panel -->
        <div class="optional-units flex-wrapper pinned-items text-only action-list citrus-50-dark">
            <div class="card standard-card single-item small-padding-top">
                <header>
                    <h1>Panel title</h1>
                </header>
                <ul>
                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Lorem ipsum dolor</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
                    <li><a href="#">Lorem ipsum dolor sit</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet consectetur</a></li>
                    <li><a href="#">Lorem ipsum</a></li>
                </ul>
            </div>
        </div>
        <!-- End component: Alternative Panel -->
    </div>
</section>
  • Handle: @panel-alternative
  • Preview:
  • Filesystem Path: components/ingredients/common-ingredients/panels/panel-alternative/panel-alternative.hbs