TACC UI Pattern Library

C Hero Banner: Has Container

A hero banner using many classes.

Usage:

  1. Add one class to your container element.
  2. Add HTML inside the container like the example.
  3. Add classes to the elements like the example.

⚠️ Warning

Not tested with different elements than those used in the example.

<div class="c-hero-banner container">
    <article class="c-hero-banner__article">
        <h1 class="c-hero-banner__title">Core Experience Portal</h1>
        <p>The Texas Advanced Computing Center (TACC) provides powerful and intuitive web interfaces that remove technological hurdles.</p>
    </article>
    <img class="c-hero-banner__media" src="https://utrc.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/72/18/72183c36-229e-4b56-a341-4591b7f5e68f/utrc-hero-1920-555-ratio.jpg__1680x1680_q85_subsampling-2.jpg" alt="hero banner">
</div>
<div class="container">
    <div class="row">
        <div class="col">
            <p>The text in the hero banner should be left-aligned with this text.</p>
        </div>
    </div>
</div>
 
{
  "shouldSkipPattern": true,
  "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",
  "shouldLoadCMS": true,
  "shouldLoadBootstrap": true,
  "hasContainer": true
}