{{> @message
    tag="p"
    content="There is a complete <code>c-card--image-___</code> feature behind this, but it is not yet documented nor available for other clients; it will be. (It came from TUP CMS.)"
}}
<section>
  <h2>Has Image</h2>
  <div class="o-grid o-grid o-grid--col-min-width">
    <a class="c-card c-card--plain c-card--image-top" href="#">
      <img alt="a paper with a gavel, a shielf with a checkmark" src="https://docs.tacc.utexas.edu/img/home/conduct.png">
      <h3>One</h3>
      <p>{{> @text-of-one-sentence }}</p>
    </a>
    <a class="card--plain card--image-top" href="#">
      <img alt="a lock with a gear and nodes" src="https://docs.tacc.utexas.edu/img/home/multi-factor.png">
      <h3>Two</h3>
      <p>{{> @text-of-one-sentence }}</p>
    </a>
    <a class="c-card c-card--plain c-card--image-top" href="#">
        <img alt="a photograph of rows of tables with trainees using laptops" src="https://docs.tacc.utexas.edu/img/home/file-share.png">
      <h3>Three</h3>
      <p>{{> @text-of-one-sentence }}</p>
    </a>
    <a class="c-card c-card--plain c-card--image-top" href="#">
      <img alt="an interface window with a graduation cap and a play button being pressed by a finger" src="https://docs.tacc.utexas.edu/img/home/remote.png">
      <h3>Four</h3>
      <p>{{> @text-of-one-sentence }}</p>
    </a>
  </div>
</section>
<section>
  <h2>No Image</h2>
  <div class="o-grid o-grid o-grid--col-min-width">
    <a class="c-card c-card--plain" href="#">
      <h3>One</h3>
      <p>{{> @text-of-one-paragraph-short }}</p>
    </a>
    <a class="c-card c-card--plain" href="#">
      <h3>Two</h3>
      <p>{{> @text-of-one-paragraph-short }}</p>
    </a>
    <a class="c-card c-card--plain" href="#">
      <h3>Three</h3>
      <p>{{> @text-of-one-paragraph-short }}</p>
    </a>
    <a class="c-card c-card--plain" href="#">
      <h3>Four</h3>
      <p>{{> @text-of-one-paragraph-short }}</p>
    </a>
  </div>
</section>