IntraCDL UI

Topic Boxes 

<!-- Default -->
<section class="c-topicbox--color1 js-topicbox">
    <header>
        <h3>Section Heading</h3>
        <button aria-label="open" aria-expanded="false"></button>
    </header>
    <div class="js-topicbox__content">
        <ul>
            <li>Learn how to update:
                <ul>
                    <li><a href="">Lorem ipsum dolor sit amet</a></li>
                    <li><a href="">Quia unde iste perspiciatis quidem</a></li>
                    <li><a href="">Impedit nihil dolores obcaecati</a></li>
                    <li><a href="">Voluptatem reiciendis alias corporis sed</a></li>
                    <li><a href="">Eius dolorem fugit itaque harum</a></li>
                </ul>
            </li>
            <li>Or get in touch at:
                <ul>
                    <li><strong><a href="mailto:website.requests@cdlib.org">Website.Requests@cdlib.org</a></strong></li>
                </ul>
            </li>
        </ul>

    </div>
</section>


<!-- 2 -->
<section class="c-topicbox--color1 js-topicbox">
    <header>
        <h3>Section Heading</h3>
        <button aria-label="open" aria-expanded="false"></button>
    </header>
    <div class="js-topicbox__content">
        <p><strong>For help with:</strong></p>
        <p>Qui aliquam, Expedita laboriosam, Ipsum eius sed, Ea nemo voluptas, Voluptates reprehenderit, Ab totam consequatur, Aperiam soluta, Eaque maxime</p>
        <p><strong><a href="">Infrastructure &amp; Application Suport</a></strong></p>

    </div>
</section>


<!-- 3 -->
<section class="c-topicbox--color2 js-topicbox">
    <header>
        <h3>Section Heading</h3>
        <button aria-label="open" aria-expanded="false"></button>
    </header>
    <div class="js-topicbox__content">
        <ul>
            <li><a href="">Ex pariatur sunt culpa quidem</a></li>
            <li><a href="">Fugit suscipit dolorum deserunt eos</a></li>
            <li><a href="">Harum accusantium quidem temporibus dolor</a></li>
            <li><a href="">Animi officiis aspernatur recusandae non</a></li>
            <li><a href="">Vero sit sed consectetur voluptate</a></li>
        </ul>

    </div>
</section>


<!-- 4 -->
<section class="c-topicbox--color1 js-topicbox">
    <header>
        <h3>Section Heading</h3>
        <button aria-label="open" aria-expanded="false"></button>
    </header>
    <div class="js-topicbox__content">
        <ul>
            <li><a href="">Ex pariatur sunt culpa quidem</a></li>
            <li><a href="">Fugit suscipit dolorum deserunt eos</a></li>
            <li><a href="">Harum accusantium quidem temporibus dolor</a></li>
            <li><a href="">Animi officiis aspernatur recusandae non</a></li>
            <li><a href="">Vero sit sed consectetur voluptate</a></li>
        </ul>

    </div>
</section>


<!-- 5 -->
<section class="c-topicbox--color3 js-topicbox">
    <header>
        <h3>Section Heading</h3>
        <button aria-label="open" aria-expanded="false"></button>
    </header>
    <div class="js-topicbox__content">
        <ul>
            <li><a href="">Ex pariatur sunt culpa quidem</a></li>
            <li><a href="">Fugit suscipit dolorum deserunt eos</a></li>
            <li><a href="">Harum accusantium quidem temporibus dolor</a></li>
            <li><a href="">Animi officiis aspernatur recusandae non</a></li>
            <li><a href="">Vero sit sed consectetur voluptate</a></li>
        </ul>

    </div>
</section>


<!-- Default -->
<section class="c-topicbox--color1 js-topicbox">
  <header>
    <h3>Section Heading</h3>
    <button aria-label="open" aria-expanded="false"></button>
  </header>
  <div class="js-topicbox__content">
  {{ render '@topiclist' }}
  </div>
</section>

<!-- 2 -->
<section class="c-topicbox--color1 js-topicbox">
  <header>
    <h3>Section Heading</h3>
    <button aria-label="open" aria-expanded="false"></button>
  </header>
  <div class="js-topicbox__content">
  {{ render '@topiclist--2' }}
  </div>
</section>

<!-- 3 -->
<section class="c-topicbox--color2 js-topicbox">
  <header>
    <h3>Section Heading</h3>
    <button aria-label="open" aria-expanded="false"></button>
  </header>
  <div class="js-topicbox__content">
  {{ render '@topiclist--3' }}
  </div>
</section>

<!-- 4 -->
<section class="c-topicbox--color1 js-topicbox">
  <header>
    <h3>Section Heading</h3>
    <button aria-label="open" aria-expanded="false"></button>
  </header>
  <div class="js-topicbox__content">
  {{ render '@topiclist--3' }}
  </div>
</section>

<!-- 5 -->
<section class="c-topicbox--color3 js-topicbox">
  <header>
    <h3>Section Heading</h3>
    <button aria-label="open" aria-expanded="false"></button>
  </header>
  <div class="js-topicbox__content">
  {{ render '@topiclist--3' }}
  </div>
</section>
 
/* Default: No context defined. */


/* 2: No context defined. */


/* 3: No context defined. */


/* 4: No context defined. */


/* 5: No context defined. */

No notes defined.