elements.html

---
layout: course_page
title: Elements reference
published: true
---
<h2>Key elements for this site</h2>
<p>A reference guide for some of the key design elements and frequently used content items on this site.</p>

<h3>Activity card</h3>
<p>Use for notebook or team conversation activities.</p>

<div class="card my-5 shadow-sm">
  <div class="card-header">
    <span>{% include icon-notebook.html %}In your notebook:</span>
    <!-- alt version for "With your team:" -->
    <!--
    <span>{% include icon-team.html %}With your team:</span>
    -->
  </div>
  <div class="card-body">
    <h3 class="card-title">The title of the activity</h3>
    <p class="card-text">Supporting text to introduce the main goal of the activity.</p>
    <ul>
        <li>An optional list of steps</li>
        <li>or questions</li>
        <li>to work on.</li>
    </ul>
    <div class="card-footer">
        <h4>Tips</h4>
        <ul>
            <li>An optional list</li>
            <li>of helpful tips</li>
        </ul>
    </div>
  </div>
</div>

<h4>Code</h4>

<script src="https://gist.github.com/dmcwo/c8474ac3fa55a471aeb2b93ce6c309e3.js"></script>

<h3>Quotes (blockquotes)</h3>

    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Donec sed odio operae, eu vulputate felis rhoncus. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Fictum, deserunt mollit anim laborum astutumque!</p>
        <p>Contra legem facit qui id facit quod lex prohibet. Curabitur est gravida et libero vitae dictum. Quis aute iure reprehenderit in voluptate velit esse. Ab illo tempore, ab est sed immemorabili. Morbi fringilla convallis sapien, id pulvinar odio volutpat.</p>
    </blockquote>

<p>Some text is <strong>bold</strong>, while other text is <em>in italics</em>.</p>