TACC UI Pattern Library

C Callout

Interrupt or end sections with a call to action.

Use <aside class="c-callout"> for static callouts, or wrap the same content in <a class="c-callout"> for a linked call to action.

☞ Remember

For linked callouts, heading and description usually come before the image or figure in the markup.

<dl>
  <dt>Text Only</dt>
  <dd>
    <aside class="c-callout">
      <h2>Text</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
    </aside>
  </dd>

  <dt>Image (Thumbnail) + Text</dt>
  <dd>
    <aside class="c-callout">
      <img
        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png__310x130_q85_crop_subject_location-171%2C166_subsampling-2_upscale.png"
        alt="(sample image)"
      />
      <h2>Image (Thumbnail) + Text</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
    </aside>
  </dd>

  <dt>Image (Square) + Text</dt>
  <dd>
    <aside class="c-callout">
      <img
        
        src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
        alt="(sample image)"
      />
      <h2>Image (Square) + Text</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
    </aside>
  </dd>

  <dt>(Link) Image (Wide) + Text</dt>
  <dd>
    <a href="#" class="c-callout">
      <h1>(Link) Image (Wide) + Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
      <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>
  </dd>

  <dt>(Link) Image (Tall) + Text</dt>
  <dd>
    <a href="#" class="c-callout">
      <h1>(Link) Image (Tall) + Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
      <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>
  </dd>

  <dt>(Link) Image With Caption (Wide) + Text</dt>
  <dd>
    <a href="#" class="c-callout">
      <h1>(Link) Image With Caption (Wide) + Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
      <figure>
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png"
          alt="(sample image)"
        />
        <figcaption>Lorem ipsum dolor sit amet, et cetera.</figcaption>
      </figure>
    </a>
  </dd>

  <dt>(Link) Image With Caption (Tall) + Text</dt>
  <dd>
    <a href="#" class="c-callout">
      <h1>(Link) Image With Caption (Tall) + Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
      <figure>
        <img
          
          src="https://cep.tacc.utexas.edu/media/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png"
          alt="(sample image)"
        />
        <figcaption>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </figcaption>
      </figure>
    </a>
  </dd>
</dl>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

dl > dd + dt {
  margin-top: 3em;
}
  • URL: /components/raw/c-callout/demo.css
  • Filesystem Path: src/lib/_imports/components/c-callout/demo.css
  • Size: 116 Bytes 
{
  "shouldSkipPattern": true,
  "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": "components"
}