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,
  "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"
}