<!-- Default -->
<h2 class="label">Card with Image &amp; Text</h2>

<div class="flex-row flex-center card-holder">
    <div class="card-item _3up"><img src="../../images/landscape.jpg" />
        <h6>Heading Goes Here</h6>
        <p>Other Stuff goes here</p>
    </div>
    <div class="card-item _3up"><img src="../../images/landscape.jpg" />
        <h6>Heading Goes Here</h6>
        <p>Other Stuff goes here</p>
    </div>
    <div class="card-item _3up"><img src="../../images/landscape.jpg" />
        <h6>Heading Goes Here</h6>
        <p>Other Stuff goes here</p>
    </div>
</div>

<!-- Buttons -->
<h2 class="label">Cards with Buttons</h2>

<div class="flex-row flex-center card-holder">
    <div class="card-item _3up"><img src="../../images/objects.jpg" />
        <h6>Heading Goes Here</h6>
        <p>Other Stuff goes here</p>
        <p class="csu-button csu-btn-large csu-orange">Click Here!</p>

    </div>
    <div class="card-item _3up"><img src="../../images/objects.jpg" />
        <h6>Heading Goes Here</h6>
        <p>Other Stuff goes here</p>
        <p class="csu-button csu-btn-large csu-orange">Click Here!</p>

    </div>
    <div class="card-item _3up"><img src="../../images/objects.jpg" />
        <h6>Heading Goes Here</h6>
        <p>Other Stuff goes here</p>
        <p class="csu-button csu-btn-large csu-orange">Click Here!</p>
    </div>
</div>

<!-- Profiles -->
<h2 class="label">Cards for Profiles &amp; Contacts</h2>

<div class="flex-row flex-center card-holder">
    <div class="card-item _3up">
        <h6 class="csu-green">Course Coordinator</h6>
        <img src="../../images/profile-1-sq.jpg" />
        <p>Other Stuff goes here</p>
        <p class="csu-button csu-btn-large csu-green">Email Me</p>
    </div>
    <div class="card-item _3up">
        <h6 class="csu-green">Course Coordinator</h6>
        <img src="../../images/profile-1-sq.jpg" />
        <p>Other Stuff goes here</p>
        <p class="csu-button csu-btn-large csu-green">Email Me</p>
    </div>
    <div class="card-item _3up">
        <h6 class="csu-green">Course Coordinator</h6>
        <img src="../../images/profile-1-sq.jpg" />
        <p>Other Stuff goes here</p>
        <p class="csu-button csu-btn-large csu-green">Email Me</p>
    </div>
</div>

<!-- Images -->
<h2 class="label">Cards for dispalying Images</h2>

<div class="flex-row flex-center card-holder">
    <div class="card-item _4up"><img src="../../images/profile-4-sq.jpg" /></div>
    <div class="card-item _4up"><img src="../../images/profile-4-sq.jpg" /></div>
    <div class="card-item _4up"><img src="../../images/profile-4-sq.jpg" /></div>
    <div class="card-item _4up"><img src="../../images/profile-4-sq.jpg" /></div>
</div>

<!-- Default -->
<h2 class="label">{{ modifier }}</h2>

<div class="flex-row flex-center card-holder">
  <div class="card-item _3up"><img src="{{ path image }}" />
    <h6>Heading Goes Here</h6>
    <p>Other Stuff goes here</p>
  </div>
  <div class="card-item _3up"><img src="{{ path image }}" />
    <h6>Heading Goes Here</h6>
    <p>Other Stuff goes here</p>
  </div>
  <div class="card-item _3up"><img src="{{ path image }}" />
    <h6>Heading Goes Here</h6>
    <p>Other Stuff goes here</p>
  </div>
</div>

<!-- Buttons -->
<h2 class="label">{{ modifier }}</h2>

<div class="flex-row flex-center card-holder">
  <div class="card-item _3up"><img src="{{path image }}" />
    <h6>Heading Goes Here</h6>
    <p>Other Stuff goes here</p>
    <p class="csu-button csu-btn-large csu-orange">Click Here!</p>

  </div>
  <div class="card-item _3up"><img src="{{path image }}" />
    <h6>Heading Goes Here</h6>
    <p>Other Stuff goes here</p>
    <p class="csu-button csu-btn-large csu-orange">Click Here!</p>

  </div>
  <div class="card-item _3up"><img src="{{path image }}" />
    <h6>Heading Goes Here</h6>
    <p>Other Stuff goes here</p>
    <p class="csu-button csu-btn-large csu-orange">Click Here!</p>
  </div>
</div>

<!-- Profiles -->
<h2 class="label">{{ modifier }}</h2>

<div class="flex-row flex-center card-holder">
  <div class="card-item _3up">
    <h6 class="csu-green">Course Coordinator</h6>
    <img src="{{path image }}" />
    <p>Other Stuff goes here</p>
    <p class="csu-button csu-btn-large csu-green">Email Me</p>
  </div>
  <div class="card-item _3up">
    <h6 class="csu-green">Course Coordinator</h6>
    <img src="{{path image }}" />
    <p>Other Stuff goes here</p>
    <p class="csu-button csu-btn-large csu-green">Email Me</p>
  </div>
  <div class="card-item _3up">
    <h6 class="csu-green">Course Coordinator</h6>
    <img src="{{path image }}" />
    <p>Other Stuff goes here</p>
    <p class="csu-button csu-btn-large csu-green">Email Me</p>
  </div>
</div>

<!-- Images -->
<h2 class="label">{{ modifier }}</h2>

<div class="flex-row flex-center card-holder">
  <div class="card-item _4up"><img src="{{path image }}" /></div>
  <div class="card-item _4up"><img src="{{path image }}" /></div>
  <div class="card-item _4up"><img src="{{path image }}" /></div>
  <div class="card-item _4up"><img src="{{path image }}" /></div>
</div>

You can use Cards to create objects that stand out from rest of the content on the page. Useful for creating navigation or more visually appealing links to other content or sections.