TACC UI Pattern Library

U Highlight

To style the highlighting behind text. Use Cases:

display: inline is required to keep highlight behind text only, instead of filling the container the text is within. 

<div class="u-highlight-container">
    <h2 class="u-highlight">Going Strong: Computational researchers present
        findings at third Frontera User Meeting</h2>
</div>
  • Content: 
    .u-highlight-container {
    max-width: 800px;
}

.u-highlight {
    padding-inline: 10px;
    color: var(--global-color-primary--xx-light);
    background-color: var(--global-color-primary--xxx-dark);
    line-height: 1;
    text-transform: uppercase;
}
  • URL: /components/raw/u-highlight/u-highlight.demo.css
  • Filesystem Path: src/lib/_imports/trumps/u-highlight/u-highlight.demo.css
  • Size: 254 Bytes 
{
  "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"
}