Hero ribbons

Hero ribbons

This high-profile banner is used only on section landing pages, and runs just below the header navigation element. The large (8-column) area on the left can hold introductory text (e.g. About, How it works) or a large, clickable US map (Explore data, Case studies).

The smaller (4-column) sidebar holds one of the following:

  • A Short paragraph / caption followed by a prominent call to action, such as a button or selector offering deeper access to that section
  • A subhead and bulleted list of useful links to content within that section of the site
  • A graphical callout that illustrates meaningful information found in that section
<!-- <div class=""></div> -->

<!-- <section class="slab-delta">
  <div class="container-page-wrapper landing-section_top ribbon ribbon-column">
    <div class="container-left-8 ribbon-hero ribbon-hero-column">
      <h1></h1>
      <p class="ribbon-hero-description">Text.</p>
    </div>
    <div class="container-right-4 ribbon-card-column ribbon-card">
      <figure class="ribbon-card-top">
        <img src="" alt="Image or text">
      </figure>
      <figcaption class="ribbon-card-bottom">Create caption and selector versions <a href="" class="link-alpha">in this space.</a></figcaption>
    </div>
  </div>
</section> -->

<div class="preview">

    <!-- new: text-hero-bullet-sidebar -->
    <section class="slab-delta">
        <div class="container-page-wrapper ribbon ribbon-column landing-section_top">
            <div class="container-left-8 ribbon-hero ribbon-hero-column">
                <h1 id="introduction">Section title</h1>
                <p class="ribbon-hero-description">Intro paragraph, perhaps with a <span class="term term-end" data-term="federal land" title="Click to define" tabindex="0">term from the glossary<icon class="icon-book"></icon></span> included.</p>
            </div>
            <div class="container-right-4 ribbon-card-column ribbon-card">
                <div class="ribbon-card-top ribbon-card-top-text">
                    <div>
                        <h2 class="ribbon-card-top-text-header">Sidebar subhead:</h2>
                        <ul class="list-bullet ribbon-card-top-list">
                            <li><a href="#">List item</a></li>
                            <li><a href="#">List item</a></li>
                            <li><a href="#">List item</a></li>
                        </ul>
                        <a href="/preview/18f/doi-extractives-data/typography-normalizing-1/how-it-works/" class="button-primary">How it works</a>
                    </div>
                </div>
            </div>
    </section>
    <p></p>

    <!-- new: text-hero-image-sidebar -->
    <section class="slab-delta">
        <div class="container-page-wrapper ribbon ribbon-column landing-section_top">
            <div class="container-left-8 ribbon-hero ribbon-hero-column">
                <h1 id="introduction">Site section title</h1>
                <p class="ribbon-hero-description">Intro paragraph, perhaps with a <span class="term term-end" data-term="federal land" title="Click to define" tabindex="0">term from the glossary<icon class="icon-book"></icon></span> included.</p>
            </div>
            <div class="container-right-4 ribbon-card-column ribbon-card">
                <div class="ribbon-card-top ribbon-card-top-text">
                    <h2 class="ribbon-card-top-text-header">Sidebar subhead / interesting fact</h2>
                    <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
                    <svg width="268px" height="103px" viewBox="0 0 268 103" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Sidebar subhead / interesting fact</title>
        <defs></defs>
        <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="how-it-works-ribbon-graphic-copy"></g>
          <g id="Icon:-Renewables-Copy" transform="translate(214.307692, 51.000000)" fill="#5C737F">
              <path d="M17.8924322,34.052816 C17.4552181,34.052816 17.1007536,33.6941162 17.1007536,33.2544599 L17.1007536,17.2873372 C17.1007536,16.8489263 17.4552181,16.4889811 17.8924322,16.4889811 C18.3284113,16.4889811 18.6841109,16.8489263 18.6841109,17.2873372 L18.6841109,33.2544599 C18.6841109,33.6941162 18.3284113,34.052816 17.8924322,34.052816" id="Fill-1"></path>
              <path d="M17.8924322,18.0856933 C16.5820249,18.0856933 15.5173962,17.0120849 15.5173962,15.6918704 C15.5173962,14.3704104 16.5820249,13.296802 17.8924322,13.296802 C19.2016045,13.296802 20.2674683,14.3704104 20.2674683,15.6918704 C20.2674683,17.0120849 19.2016045,18.0856933 17.8924322,18.0856933 L17.8924322,18.0856933 Z M17.8924322,14.8935143 C17.4552181,14.8935143 17.1007536,15.2522141 17.1007536,15.6918704 C17.1007536,16.1302813 17.4552181,16.4889811 17.8924322,16.4889811 C18.3284113,16.4889811 18.6841109,16.1302813 18.6841109,15.6918704 C18.6841109,15.2522141 18.3284113,14.8935143 17.8924322,14.8935143 L17.8924322,14.8935143 Z" id="Fill-2"></path>
              <path d="M17.8924322,11.7000897 C15.8446893,11.7000897 15.5173962,3.00535624 15.5173962,2.91817227 C15.5173962,1.59671227 16.5820249,0.523103863 17.8924322,0.523103863 C19.2016045,0.523103863 20.2674683,1.59671227 20.2674683,2.91817227 C20.2674683,3.00535624 19.9389402,11.7000897 17.8924322,11.7000897 L17.8924322,11.7000897 Z M17.8924322,2.11981613 C17.4552181,2.11981613 17.1007536,2.47851592 17.1007536,2.91817227 C17.1007536,3.76261136 17.4737441,7.10424866 17.8924322,9.00610484 C18.3098853,7.10798511 18.6841109,3.76261136 18.6841109,2.91817227 C18.6841109,2.47851592 18.3284113,2.11981613 17.8924322,2.11981613 L17.8924322,2.11981613 Z" id="Fill-3"></path>
              <path d="M6.82869179,24.3056474 C5.96784929,24.3056474 5.17123033,23.8348539 4.75130716,23.0763533 C4.11524707,21.9217883 4.52528969,20.4595885 5.67019786,19.816918 C6.32601905,19.4494998 11.6071704,17.091796 13.3535568,17.091796 C13.9982624,17.091796 14.2971489,17.3857305 14.4342414,17.6323366 C15.4272362,19.4308175 8.0612898,23.9594024 7.9834805,23.999258 C7.62901594,24.1985356 7.231324,24.3056474 6.82869179,24.3056474 L6.82869179,24.3056474 Z M12.0839068,18.9575331 C10.1411446,19.5329473 7.06705994,20.8581438 6.44088039,21.2106162 C6.06171447,21.4248397 5.92338683,21.9118244 6.13581855,22.3004159 C6.34207494,22.670325 6.83857233,22.8210288 7.21403305,22.6043143 C7.94272325,22.1945496 10.6351718,20.2503469 12.0839068,18.9575331 L12.0839068,18.9575331 Z" id="Fill-4"></path>
              <path d="M29.5971731,24.3056474 L29.5971731,24.3056474 C29.1957759,24.3056474 28.7968489,24.204763 28.4436194,24.0054854 C28.3658101,23.9656298 20.9986286,19.437045 21.9916234,17.6373186 C22.1274809,17.3932035 22.4263674,17.0980234 23.071073,17.0980234 C24.8186944,17.0980234 30.0998458,19.4582182 30.755667,19.8206545 C31.9018102,20.4620794 32.3118529,21.9242793 31.6745577,23.0825807 C31.2533995,23.8348539 30.4567805,24.3056474 29.5971731,24.3056474 L29.5971731,24.3056474 Z M24.3296074,18.9488147 C25.7734021,20.245365 28.4794364,22.1933041 29.2093617,22.6068053 C29.5811172,22.8135559 30.0837899,22.670325 30.2875762,22.3004159 C30.501243,21.9130699 30.3641504,21.4260851 29.9825143,21.2093707 C29.3538647,20.8581438 26.2501384,19.5204925 24.3296074,18.9488147 L24.3296074,18.9488147 Z" id="Fill-5"></path>
              <path d="M36.0998069,34.8511721 L1.26717992,34.8511721 C0.829965795,34.8511721 0.475501237,34.4924723 0.475501237,34.052816 C0.475501237,33.6144052 0.829965795,33.2544599 1.26717992,33.2544599 L36.0998069,33.2544599 C36.5357859,33.2544599 36.8927206,33.6144052 36.8927206,34.052816 C36.8927206,34.4924723 36.5357859,34.8511721 36.0998069,34.8511721" id="Fill-6"></path>
          </g>
        </g>
    </svg>
                </div>
                <div class="ribbon-card-bottom">
                    <a href="/preview/18f/doi-extractives-data/typography-normalizing-1/how-it-works/production/" class="link-alpha">Link to interesting section content</a>
                </div>
            </div>
    </section>
    <p></p>

    <!-- map-hero-text-sidebar -->
    <section class="slab-delta">
        <div class="container-page-wrapper ribbon ribbon-column landing-section_top">
            <div class="container-left-8 ribbon-hero ribbon-hero-column">
                <h1 id="introduction">Section title</h1>
                <p class="ribbon-hero-description">[U.S. Map]</p>
            </div>
            <div class="container-right-4 ribbon-card-column ribbon-card state_pages-ribbon-card">
                <figure class="ribbon-card-top">
                    <h2 class="ribbon-card-top-text-header">Sidebar subhead</h2>
                    <p>Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text.</p>
                </figure>
                <figcaption class="ribbon-card-bottom state_pages-select">
                    <label for="location-selector" class="ribbon-card-top-text-header">Selector call to action:</label>
                    <select id="location-selector" class="select-dark-gray" onchange="">
            <option value="#">Choose one</option>
            <option value="#">Option 1</option>
            <option value="#">Option 2</option>
          </select>
                </figcaption>
            </div>
    </section>
    <p></p>

    </div>
<!-- <div class="{{ className }}">{{ text }}</div> -->

<!-- <section class="slab-delta">
  <div class="container-page-wrapper landing-section_top ribbon ribbon-column">
    <div class="container-left-8 ribbon-hero ribbon-hero-column">
      <h1>{{ page.title }}</h1>
      <p class="ribbon-hero-description">Text.</p>
    </div>
    <div class="container-right-4 ribbon-card-column ribbon-card">
      <figure class="ribbon-card-top">
        <img src="" alt="Image or text">
      </figure>
      <figcaption class="ribbon-card-bottom">Create caption and selector versions <a href="{{site.baseurl}}" class="link-alpha">in this space.</a></figcaption>
    </div>
  </div>
</section> -->

<div class="preview">

<!-- new: text-hero-bullet-sidebar -->
  <section class="slab-delta">
    <div class="container-page-wrapper ribbon ribbon-column landing-section_top">
  	  <div class="container-left-8 ribbon-hero ribbon-hero-column">
  			<h1 id="introduction">Section title</h1>
  			<p class="ribbon-hero-description">Intro paragraph, perhaps with a <span class="term term-end" data-term="federal land" title="Click to define" tabindex="0">term from the glossary<icon class="icon-book"></icon></span> included.</p>
  		</div>
  		<div class="container-right-4 ribbon-card-column ribbon-card">
        <div class="ribbon-card-top ribbon-card-top-text">
          <div>
            <h2 class="ribbon-card-top-text-header">Sidebar subhead:</h2>
            <ul class="list-bullet ribbon-card-top-list">
              <li><a href="#">List item</a></li>
              <li><a href="#">List item</a></li>
              <li><a href="#">List item</a></li>
            </ul>
            <a href="/preview/18f/doi-extractives-data/typography-normalizing-1/how-it-works/" class="button-primary">How it works</a>
        </div>
      </div>
  	</div>
  </section>
  <p></p>

  <!-- new: text-hero-image-sidebar -->
  <section class="slab-delta">
    <div class="container-page-wrapper ribbon ribbon-column landing-section_top">
  	  <div class="container-left-8 ribbon-hero ribbon-hero-column">
  			<h1 id="introduction">Site section title</h1>
  			<p class="ribbon-hero-description">Intro paragraph, perhaps with a <span class="term term-end" data-term="federal land" title="Click to define" tabindex="0">term from the glossary<icon class="icon-book"></icon></span> included.</p>
  		</div>
    <div class="container-right-4 ribbon-card-column ribbon-card">
          <div class="ribbon-card-top ribbon-card-top-text">
            <h2 class="ribbon-card-top-text-header">Sidebar subhead / interesting fact</h2>
            <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
    <svg width="268px" height="103px" viewBox="0 0 268 103" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Sidebar subhead / interesting fact</title>
        <defs></defs>
        <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="how-it-works-ribbon-graphic-copy"></g>
          <g id="Icon:-Renewables-Copy" transform="translate(214.307692, 51.000000)" fill="#5C737F">
              <path d="M17.8924322,34.052816 C17.4552181,34.052816 17.1007536,33.6941162 17.1007536,33.2544599 L17.1007536,17.2873372 C17.1007536,16.8489263 17.4552181,16.4889811 17.8924322,16.4889811 C18.3284113,16.4889811 18.6841109,16.8489263 18.6841109,17.2873372 L18.6841109,33.2544599 C18.6841109,33.6941162 18.3284113,34.052816 17.8924322,34.052816" id="Fill-1"></path>
              <path d="M17.8924322,18.0856933 C16.5820249,18.0856933 15.5173962,17.0120849 15.5173962,15.6918704 C15.5173962,14.3704104 16.5820249,13.296802 17.8924322,13.296802 C19.2016045,13.296802 20.2674683,14.3704104 20.2674683,15.6918704 C20.2674683,17.0120849 19.2016045,18.0856933 17.8924322,18.0856933 L17.8924322,18.0856933 Z M17.8924322,14.8935143 C17.4552181,14.8935143 17.1007536,15.2522141 17.1007536,15.6918704 C17.1007536,16.1302813 17.4552181,16.4889811 17.8924322,16.4889811 C18.3284113,16.4889811 18.6841109,16.1302813 18.6841109,15.6918704 C18.6841109,15.2522141 18.3284113,14.8935143 17.8924322,14.8935143 L17.8924322,14.8935143 Z" id="Fill-2"></path>
              <path d="M17.8924322,11.7000897 C15.8446893,11.7000897 15.5173962,3.00535624 15.5173962,2.91817227 C15.5173962,1.59671227 16.5820249,0.523103863 17.8924322,0.523103863 C19.2016045,0.523103863 20.2674683,1.59671227 20.2674683,2.91817227 C20.2674683,3.00535624 19.9389402,11.7000897 17.8924322,11.7000897 L17.8924322,11.7000897 Z M17.8924322,2.11981613 C17.4552181,2.11981613 17.1007536,2.47851592 17.1007536,2.91817227 C17.1007536,3.76261136 17.4737441,7.10424866 17.8924322,9.00610484 C18.3098853,7.10798511 18.6841109,3.76261136 18.6841109,2.91817227 C18.6841109,2.47851592 18.3284113,2.11981613 17.8924322,2.11981613 L17.8924322,2.11981613 Z" id="Fill-3"></path>
              <path d="M6.82869179,24.3056474 C5.96784929,24.3056474 5.17123033,23.8348539 4.75130716,23.0763533 C4.11524707,21.9217883 4.52528969,20.4595885 5.67019786,19.816918 C6.32601905,19.4494998 11.6071704,17.091796 13.3535568,17.091796 C13.9982624,17.091796 14.2971489,17.3857305 14.4342414,17.6323366 C15.4272362,19.4308175 8.0612898,23.9594024 7.9834805,23.999258 C7.62901594,24.1985356 7.231324,24.3056474 6.82869179,24.3056474 L6.82869179,24.3056474 Z M12.0839068,18.9575331 C10.1411446,19.5329473 7.06705994,20.8581438 6.44088039,21.2106162 C6.06171447,21.4248397 5.92338683,21.9118244 6.13581855,22.3004159 C6.34207494,22.670325 6.83857233,22.8210288 7.21403305,22.6043143 C7.94272325,22.1945496 10.6351718,20.2503469 12.0839068,18.9575331 L12.0839068,18.9575331 Z" id="Fill-4"></path>
              <path d="M29.5971731,24.3056474 L29.5971731,24.3056474 C29.1957759,24.3056474 28.7968489,24.204763 28.4436194,24.0054854 C28.3658101,23.9656298 20.9986286,19.437045 21.9916234,17.6373186 C22.1274809,17.3932035 22.4263674,17.0980234 23.071073,17.0980234 C24.8186944,17.0980234 30.0998458,19.4582182 30.755667,19.8206545 C31.9018102,20.4620794 32.3118529,21.9242793 31.6745577,23.0825807 C31.2533995,23.8348539 30.4567805,24.3056474 29.5971731,24.3056474 L29.5971731,24.3056474 Z M24.3296074,18.9488147 C25.7734021,20.245365 28.4794364,22.1933041 29.2093617,22.6068053 C29.5811172,22.8135559 30.0837899,22.670325 30.2875762,22.3004159 C30.501243,21.9130699 30.3641504,21.4260851 29.9825143,21.2093707 C29.3538647,20.8581438 26.2501384,19.5204925 24.3296074,18.9488147 L24.3296074,18.9488147 Z" id="Fill-5"></path>
              <path d="M36.0998069,34.8511721 L1.26717992,34.8511721 C0.829965795,34.8511721 0.475501237,34.4924723 0.475501237,34.052816 C0.475501237,33.6144052 0.829965795,33.2544599 1.26717992,33.2544599 L36.0998069,33.2544599 C36.5357859,33.2544599 36.8927206,33.6144052 36.8927206,34.052816 C36.8927206,34.4924723 36.5357859,34.8511721 36.0998069,34.8511721" id="Fill-6"></path>
          </g>
        </g>
    </svg>
      </div>
      <div class="ribbon-card-bottom">
        <a href="/preview/18f/doi-extractives-data/typography-normalizing-1/how-it-works/production/" class="link-alpha">Link to interesting section content</a>
      </div>
    </div>
  </section>
  <p></p>

  <!-- map-hero-text-sidebar -->
  <section class="slab-delta">
    <div class="container-page-wrapper ribbon ribbon-column landing-section_top">
  	  <div class="container-left-8 ribbon-hero ribbon-hero-column">
  			<h1 id="introduction">Section title</h1>
  			<p class="ribbon-hero-description">[U.S. Map]</p>
  		</div>
      <div class="container-right-4 ribbon-card-column ribbon-card state_pages-ribbon-card">
        <figure class="ribbon-card-top">
          <h2 class="ribbon-card-top-text-header">Sidebar subhead</h2>
          <p>Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text. Sidebar text.</p>
        </figure>
        <figcaption class="ribbon-card-bottom state_pages-select">
          <label for="location-selector" class="ribbon-card-top-text-header">Selector call to action:</label>
          <select id="location-selector" class="select-dark-gray" onchange="">
            <option value="#">Choose one</option>
            <option value="#">Option 1</option>
            <option value="#">Option 2</option>
          </select>
        </figcaption>
      </div>
    </section>
    <p></p>

</div>
/* No context defined for this component. */