S Header: With Branding

No notes defined.

<!-- FAQ:

This is the markup of the #s-header, as of 2020-03-11,
from https://frontera-portal.tacc.utexas.edu/. It has:

- Bootstrap class names
  (also via `./s-portal-nav.html`)
  (also via `./s-cms-nav.html`)
- Bootstrap attributes
  (also via `./s-portal-nav.html`)
- multiple internal scope (`s-`) classes
  (only via `./s-portal-nav.html`)
  (only via `./s-cms-nav.html`)
- FontAwesome class names
  (only via `./s-portal-nav.html`)
- illegally-nested markup (`ul > div > li`)
  (only via `./s-portal-nav.html`)
-->
<div class="branding-header">
  <a href="https://www.nsf.gov/" target="_blank" aria-label="National Science Foundation">
    <img class="branding-logo branding-nsf" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/nsf-white.png" alt="NSF (National Science Foundation) Logo">
  </a>
  <span class="branding-seperator"></span>
  <a href="https://www.tacc.utexas.edu/" target="_blank" aria-label="Texas Advanced Computing Center">
    <img class="branding-logo branding-tacc" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-white.png" alt="TACC (Texas Advanced Computing Center) Logo">
  </a>
  <span class="branding-seperator"></span>
  <a href="https://www.utexas.edu/" target="_blank" aria-label="University of Texas at Austin">
    <img class="branding-logo branding-utaustin" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/utaustin-white.png" alt="UTexas (University of Texas at Austin) Logo">
  </a>
</div>
<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="/">
    <img
        src="https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@79b8ac4/apcd_cms/src/taccsite_custom/apcd_cms/static/apcd_cms/img/org_logos/apcd-white.png"
        alt="Raster Logo"
      class="portal-logo"
    />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarExpandTarget-0"
    aria-controls="navbarExpandTarget-0" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarExpandTarget-0">
    <!-- WARNING: Has Bootstrap class names (don't mimic unless using Bootstrap) -->
<ul class="s-cms-nav  navbar-nav  mr-auto">
  <li class="nav-item dropdown">
    <button
      class="nav-link dropdown-toggle"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      aria-controls="nav-menu-0-1"
      id="nav-link-0-1"
    >
      Guides
      <span class="sr-only">(Toggle Dropdown)</span>
    </button>
    <nav
      class="dropdown-menu"
      role="menu"
      id="nav-menu-0-1"
      aria-labelledby="nav-link-0-1"
    >
      <a
        class="dropdown-item"
        href="#"
        aria-label="Opens in new window.">
          Getting Started
      </a>
      <a
        class="dropdown-item"
        href="#"
        aria-label="Opens in new window."
      >
        Portal Access
      </a>
      <a
        class="dropdown-item"
        href="#"
        aria-label="Opens in new window.">
        User Guide
      </a>
    </nav>
  </li>

  <li class="nav-item dropdown">
    <button
      class="nav-link"
      id="nav-link-0-2"
    >
      About
    </button>
    <button
      type="button"
      class="nav-link dropdown-toggle dropdown-toggle-split"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      aria-controls="nav-menu-0-2"
    >
      <span class="sr-only">(Toggle Dropdown)</span>
    </button>
    <nav
      class="dropdown-menu"
      role="menu"
      id="nav-menu-0-2"
      aria-labelledby="nav-link-0-2"
    >
      <a
        class="dropdown-item"
        href="#"
      >
        Portal Technology Stack
      </a>
      <a
        class="dropdown-item"
        href="#"
      >
        Portals List
      </a>
    </nav>
  </li>

  <li class="nav-item">
    <a
      class="nav-link"
      href="#"
    >
      ML Workbench
    </a>
  </li>

  <li class="nav-item">
    <a
      class="nav-link"
      href="#"
    >
      AI Sandbox
    </a>
  </li>
</ul>
 <!-- WARNING: Has Bootstrap class names (don't mimic unless using Bootstrap) -->
<ul class="s-portal-nav navbar-nav">
  <!-- When user is not logged in, there are zero dropdown(-*) classes -->
  <li class="nav-item dropdown">
    <button
      class="nav-link dropdown-toggle"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      aria-controls="nav-menu-0-portal-1"
      id="nav-link-0-portal-1"
    >
      <i class="icon icon-user" aria-hidden="true"></i>
      username
      <span class="sr-only">(toggle dropdown)</span>
    </button>
    <nav
      class="dropdown-menu dropdown-menu-right"
      id="nav-menu-0-portal-1"
      aria-labelledby="nav-link-0-portal-1"
    >
      <a
        class="dropdown-item"
        href="#"
      >
        <i class="icon icon-dashboard" aria-hidden="true"></i>
        My Dashboard
      </a>
      <a
        class="dropdown-item"
        href="#"
      >
        <i class="icon icon-approved-boxed" aria-hidden="true"></i>
        Onboarding Admin
      </a>
      <a
        class="dropdown-item"
        href="#"
      >
        <i class="icon icon-gear" aria-hidden="true"></i>
        My Account
      </a>
      <a
        class="dropdown-item"
        href="#"
      >
        <i class="icon icon-user" aria-hidden="true"></i>
        Log Out
      </a>
    </nav>
  </li>
</ul>
  </div>
</nav>
  • Content:
    :root {
        --global-font-family: var(--global-font-family--sans);
        --font-family-sans-serif: var(--global-font-family--sans);
        --font-family-monospace: var(--global-font-family--mono);
    }
    
    main {
        padding-block: unset;
        width: unset;
    }
    
  • URL: /components/raw/s-header/s-header.demo.css
  • Filesystem Path: src/lib/_imports/trumps/s-header/s-header.demo.css
  • Size: 248 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": "trumps",
  "shouldLoadBootstrap": true,
  "shouldLoadCMS": true,
  "supportStyles": [
    "../../assets/core-styles.header.css",
    "../../assets/core-styles.theme.default.css"
  ]
}