Topic bar
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 |
.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 |
.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 |
.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 |