<!-- Community -->
<h3 class="underline csu-red-line">Community</h2>

    <p>Black</p>
    <div class="flex-row action-box padding-1">
        <div class="flex-column"><img src="../../images/Community-Blk.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Community-Blk-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Community-Blk-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

    <p>Reversed</p>
    <div class="flex-row action-box csu-green padding-1">
        <div class="flex-column"><img src="../../images/Community-Rev.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Community-Rev-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Community-Rev-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

<!-- Content -->
<h3 class="underline csu-red-line">Content</h2>

    <p>Black</p>
    <div class="flex-row action-box padding-1">
        <div class="flex-column"><img src="../../images/Content-Blk.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Content-Blk-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Content-Blk-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

    <p>Reversed</p>
    <div class="flex-row action-box csu-green padding-1">
        <div class="flex-column"><img src="../../images/Content-Rev.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Content-Rev-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Content-Rev-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

<!-- Institution -->
<h3 class="underline csu-red-line">Institution</h2>

    <p>Black</p>
    <div class="flex-row action-box padding-1">
        <div class="flex-column"><img src="../../images/Institution-Blk.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Institution-Blk-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Institution-Blk-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

    <p>Reversed</p>
    <div class="flex-row action-box csu-green padding-1">
        <div class="flex-column"><img src="../../images/Institution-Rev.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Institution-Rev-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Institution-Rev-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

<!-- Peer -->
<h3 class="underline csu-red-line">Peer</h2>

    <p>Black</p>
    <div class="flex-row action-box padding-1">
        <div class="flex-column"><img src="../../images/Peer-Blk.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Peer-Blk-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Peer-Blk-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

    <p>Reversed</p>
    <div class="flex-row action-box csu-green padding-1">
        <div class="flex-column"><img src="../../images/Peer-Rev.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Peer-Rev-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Peer-Rev-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

<!-- Teacher -->
<h3 class="underline csu-red-line">Teacher</h2>

    <p>Black</p>
    <div class="flex-row action-box padding-1">
        <div class="flex-column"><img src="../../images/Teacher-Blk.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Teacher-Blk-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Teacher-Blk-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

    <p>Reversed</p>
    <div class="flex-row action-box csu-green padding-1">
        <div class="flex-column"><img src="../../images/Teacher-Rev.png">
            <p class="smaller-text center-text">Icon</p>
        </div>
        <div class="flex-column"><img src="../../images/Teacher-Rev-Line.png">
            <p class="smaller-text center-text">With Line</p>
        </div>
        <div class="flex-column"><img src="../../images/Teacher-Rev-Fill.png">
            <p class="smaller-text center-text">With Fill</p>
        </div>
    </div>

<h3 class="underline csu-red-line">{{ modifier }}</h2>

<p>Black</p>
<div class="flex-row action-box padding-1">
  <div class="flex-column"><img src="../../images/{{ modifier }}-Blk.png"><p class="smaller-text center-text">Icon</p></div>
  <div class="flex-column"><img src="../../images/{{ modifier }}-Blk-Line.png"><p class="smaller-text center-text">With Line</p></div>
  <div class="flex-column"><img src="../../images/{{ modifier }}-Blk-Fill.png"><p class="smaller-text center-text">With Fill</p></div>
</div>

<p>Reversed</p>
<div class="flex-row action-box csu-green padding-1">
  <div class="flex-column"><img src="../../images/{{ modifier }}-Rev.png"><p class="smaller-text center-text">Icon</p></div>
  <div class="flex-column"><img src="../../images/{{ modifier }}-Rev-Line.png"><p class="smaller-text center-text">With Line</p></div>
  <div class="flex-column"><img src="../../images/{{ modifier }}-Rev-Fill.png"><p class="smaller-text center-text">With Fill</p></div>
</div>

These activity icons were designed to represents the different kinds of interact rather than specific types of activity. This follows along from the work done in the Online Learning Model.