Topic bar

View in Github

Horizontal list of links that intentionally overflows on mobile. Found on the homepage and story pages. The list items are editable via flatblock. We rely on inheritance for this component to simplify the markup.

.c-topic-bar

<div class="c-topic-bar  t-links-underlined-hover t-size-xs t-align-center has-bg-white" aria-labelledby="topic-bar-label">
  <h2 id="topic-bar-label" class="is-sr-only">Key coverage</h2>
  <div class="c-topic-bar__inner">
    <ul>
      <li aria-hidden="true" class="t-size-xxs">
        <strong>KEY COVERAGE</strong>
      </li>
      <li><a href="#">How to Get Help</a></li>
      <li><a href="#">Coronavirus Newsletter</a></li>
      <li><a href="#">Life in the Pandemic</a></li>
      <li><a href="#">Unemployment Benefits</a></li>
    </ul>
  </div>
</div>

Repo	Count	Location(s)
texastribune	1	List topic_bar.html

.c-topic-bar--sticky

Stick to the top of the screen

<div class="c-topic-bar c-topic-bar--sticky t-links-underlined-hover t-size-xs t-align-center has-bg-white" aria-labelledby="topic-bar-label">
  <h2 id="topic-bar-label" class="is-sr-only">Key coverage</h2>
  <div class="c-topic-bar__inner">
    <ul>
      <li aria-hidden="true" class="t-size-xxs">
        <strong>KEY COVERAGE</strong>
      </li>
      <li><a href="#">How to Get Help</a></li>
      <li><a href="#">Coronavirus Newsletter</a></li>
      <li><a href="#">Life in the Pandemic</a></li>
      <li><a href="#">Unemployment Benefits</a></li>
    </ul>
  </div>
</div>

Repo	Count	Location(s)
texastribune	1	List topic_bar.html

.c-topic-bar--btm-border

Add a thin gray bottom border

<div class="c-topic-bar c-topic-bar--btm-border t-links-underlined-hover t-size-xs t-align-center has-bg-white" aria-labelledby="topic-bar-label">
  <h2 id="topic-bar-label" class="is-sr-only">Key coverage</h2>
  <div class="c-topic-bar__inner">
    <ul>
      <li aria-hidden="true" class="t-size-xxs">
        <strong>KEY COVERAGE</strong>
      </li>
      <li><a href="#">How to Get Help</a></li>
      <li><a href="#">Coronavirus Newsletter</a></li>
      <li><a href="#">Life in the Pandemic</a></li>
      <li><a href="#">Unemployment Benefits</a></li>
    </ul>
  </div>
</div>

Repo	Count	Location(s)
texastribune	1	List topic_bar.html

.c-topic-bar--top-border-until-bp-l

Add a top gray border on small screens

<div class="c-topic-bar c-topic-bar--top-border-until-bp-l t-links-underlined-hover t-size-xs t-align-center has-bg-white" aria-labelledby="topic-bar-label">
  <h2 id="topic-bar-label" class="is-sr-only">Key coverage</h2>
  <div class="c-topic-bar__inner">
    <ul>
      <li aria-hidden="true" class="t-size-xxs">
        <strong>KEY COVERAGE</strong>
      </li>
      <li><a href="#">How to Get Help</a></li>
      <li><a href="#">Coronavirus Newsletter</a></li>
      <li><a href="#">Life in the Pandemic</a></li>
      <li><a href="#">Unemployment Benefits</a></li>
    </ul>
  </div>
</div>

Repo	Count	Location(s)
texastribune	1	List topic_bar.html