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">
                    <h1>Panel title</h1>
                    <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>
        <!-- End component: Alternative Panel -->
  • Handle: @panel-alternative
  • Preview:
  • Filesystem Path: components/ingredients/common-ingredients/panels/panel-alternative/panel-alternative.hbs