TACC UI Pattern Library

S Hero Banner: Has Container

A hero banner using one class but specific elements.

Usage:

  1. Add one class to your container element.
  2. Add HTML inside the container like the example.
<div class="s-hero-banner container">
    <article>
        <h1>Core Experience Portal</h1>
        <p>The Texas Advanced Computing Center (TACC) provides powerful and intuitive web interfaces that remove technological hurdles.</p>
    </article>
    <img 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": "trumps",
  "shouldLoadCMS": true,
  "shouldLoadBootstrap": true,
  "hasContainer": true
}