TACC UI Pattern Library

S Image Grid

A block or list of links that each have an image.

The grid supports, without change to layout:

  • large and small images
  • markup with or without <ul> and <li>’s

The grid supports user input to change layout:

  • --row-height: row height (hint: 1fr gives equal-height rows)
  • --min-width: minimum width (the smallest width for an image)
  • --max-cols: maximum columns (the maximum number of columns)
<dl>
  <dt>
    Images Use Full-Size URLs<br />
    <small><ul>
      <li>images are larger, so (by default) row height will be taller</li>
      <li>link <code>href</code> matches image </code>src</code> (not sensible, but usage via a cms plugin create such markup if a user does not add links)</li>
    </ul></small>
  </dt>
  <dd>
    <div class="s-image-grid s-image-grid--links-are-automatic">
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png"
          alt="(sample image)"
        />
      </a>
    </div>
  </dd>
  <dt>
    Images Use Thumbnail URLs<br />
    <small><ul>
      <li>images are smaller, so (by default) row height will be shorter</li>
      <li>link <code>href</code> is to a larger-size image than the image </code>src</code> (expected markup)</li>
    </ul></small>
  </dt>
  <dd>
    <div class="s-image-grid s-image-grid--links-are-manual">
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
          alt="(sample image)"
        />
      </a>
      <a href="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png" target="_blank">
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png"
          alt="(sample image)"
        />
      </a>
    </div>
  </dd>
  <dt>
    Grid is a List<br />
    <small><ul>
      <li>this grid should look identical to "Images Use Thumbnail URLs"</li>
      <li>the markup is different, though (this uses &lt;ul&gt; and &lt;li&gt;'s)</li>
    </ul></small>
  </dt>
  <dd>
    <ul class="s-image-grid s-image-grid--links-are-manual">
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
            alt="(sample image)"
          />
        </a>
      </li>
      <li>
        <a href="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png" target="_blank">
          <img
            
            src="https://cep.tacc.utexas.edu/media/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png"
            alt="(sample image)"
          />
        </a>
      </li>
    </ul>
  </dd>
</dl>
 
{
  "shouldSkipPattern": false,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "bootstrap5Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap5.css"
    }
  ],
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "trumps",
  "📝 shouldSkipPattern": "because core-styles.….css does not import this"
}