Reporters list

Useful for showing a linked headline along with a linked byline and pub date.

Classes needed:

  • has-bg-white
  • has-padding
  • has-text-gray-dark
  • has-b-btm-marg
  • has-xxxs-btm-marg
  • is-rounded-b
  • l-display-ib
  • t-byline
  • t-byline__item
  • t-links
  • t-links-underlined-hover
  • t-size-b
  • t-size-xxs
  • t-size-xxs
  • t-serif
  • t-lh-s
  • t-lsp-l
  • t-uppercase

No specific class used here. See code view for details.
<div class="has-bg-white-off has-padding">
  <section style="max-width: 450px; margin-left: 20px;">
    <h3 class="t-uppercase t-size-m has-s-btm-marg">
      Latest from our reporters
    </h3>
  
    <ul class="has-bg-white has-padding is-rounded-b">
      <li class="has-b-btm-marg">
        <article>
          <h4 class="has-xxxs-btm-marg t-links-underlined-hover t-size-b t-serif t-lh-s">
            <strong>
              <a href="#">
                Texas education officials recommend replacing Houston ISD's elected school board
              </a>
            </strong>
          </h4>
          <p class="t-links t-byline t-uppercase t-lsp-l t-size-xxs has-text-gray-dark">
            <a href="#" class="t-byline__item l-display-ib">
              Patrick Svitek
            </a>
            <time class="t-byline__item l-display-ib">Nov. 4, 2019</time>
          </p>
        </article>
      </li>

      <li class="has-b-btm-marg">
        <article>
          <h4 class="has-xxxs-btm-marg t-links-underlined-hover t-size-b t-serif t-lh-s">
            <strong>
              <a href="#">
                Texas Democrats are suing the state over its move to end temporary voting locations
              </a>
            </strong>
          </h4>
          <p class="t-links t-byline t-uppercase t-lsp-l t-size-xxs has-text-gray-dark">
            <a href="#" class="t-byline__item l-display-ib">
              Alexa Ura
            </a>
            <time class="t-byline__item l-display-ib">Oct. 30, 2019</time>
          </p>
        </article>
      </li>

      <li class="has-b-btm-marg">
        <article>
          <h4 class="has-xxxs-btm-marg t-links-underlined-hover t-size-b t-serif t-lh-s">
            <strong>
              <a href="#">
                Elizabeth Warren and Julián Castro may be rivals — but they’re buddies, too
              </a>
            </strong>
          </h4>
          <p class="t-links t-byline t-uppercase t-lsp-l t-size-xxs has-text-gray-dark">
            <a href="#" class="t-byline__item l-display-ib">
              Alex Samuels
            </a>
            <time class="t-byline__item l-display-ib">Oct. 30, 2019</time>
          </p>
        </article>
      </li>

      <li>
        <article>
          <h4 class="has-xxxs-btm-marg t-links-underlined-hover t-size-b t-serif t-lh-s">
            <strong>
              <a href="#">
                Capitol insiders: Texas Lt. Gov. Dan Patrick is letting the state's budget agency fall apart
              </a>
            </strong>
          </h4>
          <p class="t-links t-byline t-uppercase t-lsp-l t-size-xxs has-text-gray-dark">
            <a href="#" class="t-byline__item l-display-ib">
              Edgar Walters
            </a>
            <time class="t-byline__item l-display-ib">Oct. 29, 2019</time>
          </p>
        </article>
      </li>
    </ul>
  </section>
</div>
This class isn't referenced anywhere