flag

The flag goes at the top of all pages. In keeping with the changes in 1.11.3 raw SVG code is used in place of CSS classes for the icons. The search panel animation is included and can be toggled with a class on the flag itself. The account popout uses our standard expander molecule with a small amount of CSS to set the positioning.

There are a few other enhancements to the style guide to optimize this code.

media breakpoint classes

We added very rudimentary utility classes to toggle visibility for three media breakpoints. The approach is mobile first, with classes to toggle display at larger breakpoints. Typically we like to keep these rules isolated to each card to keep structure semantic and safeguard against unintended future breaks, but in larger cards that’s not optimal. Check out display-classes.css file for a reference.

EXAMPLE

The flag is included in our story deck and is better represented there.

HTML

The HTML is separate, to a point, for account holders and anonymous readers. There is also a separate bottom navigation and corresponding class on the flag section to make the logo a little larger. For a better idea of the logic and what’s different between versions check out the footer.html shortcode on GitHub.

User is not logged into an account:
<section class="flag full-bleed standard">
  <div class="paper front">
    <div class="top flex relative">
      <div class="flex icons">
        <button class="flex" onclick="showNavigation()">
          <svg viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
          <span class="h5 icon-label d-desktop">SECTIONS</span>
        </button>
        <a href="#" class="d-tablet">
          <svg viewBox="0 0 576 512"><path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"/></svg>
        </a>
        <a href="#" class="d-tablet">
          <svg viewBox="0 0 640 512"><path d="M575.2 325.7c.2-1.9.8-3.7.8-5.6 0-35.3-28.7-64-64-64-12.6 0-24.2 3.8-34.1 10-17.6-38.8-56.5-66-101.9-66-61.8 0-112 50.1-112 112 0 3 .7 5.8.9 8.7-49.6 3.7-88.9 44.7-88.9 95.3 0 53 43 96 96 96h272c53 0 96-43 96-96 0-42.1-27.2-77.4-64.8-90.4zm-430.4-22.6c-43.7-43.7-43.7-114.7 0-158.3 43.7-43.7 114.7-43.7 158.4 0 9.7 9.7 16.9 20.9 22.3 32.7 9.8-3.7 20.1-6 30.7-7.5L386 81.1c4-11.9-7.3-23.1-19.2-19.2L279 91.2 237.5 8.4C232-2.8 216-2.8 210.4 8.4L169 91.2 81.1 61.9C69.3 58 58 69.3 61.9 81.1l29.3 87.8-82.8 41.5c-11.2 5.6-11.2 21.5 0 27.1l82.8 41.4-29.3 87.8c-4 11.9 7.3 23.1 19.2 19.2l76.1-25.3c6.1-12.4 14-23.7 23.6-33.5-13.1-5.4-25.4-13.4-36-24zm-4.8-79.2c0 40.8 29.3 74.8 67.9 82.3 8-4.7 16.3-8.8 25.2-11.7 5.4-44.3 31-82.5 67.4-105C287.3 160.4 258 140 224 140c-46.3 0-84 37.6-84 83.9z"/></svg>
        </a>
        <svg class="d-desktop" onclick="toggleSearchForm()" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
      </div>
      <a class="market-logo" href="#">
        <img src="https://www.kansascity.com/wps/build/images/kansascity/logo.svg">
      </a>
      <div class="flex signin">
        <a class="button d-desktop" href="#">SIGN IN</a>
        <a class="button impact d-desktop" href="#">SUBSCRIBE</a>
        <div class="expander h-desktop" onclick="this.classList.toggle('open')">
          <svg viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
        </div>
        <div class="popout paper sans">
          <a class="h5" href="#">SIGN IN</a>
          <a class="h5" href="#">SUBSCRIBE</a>
        </div>
      </div>
    </div>
  </div><form class="search paper">
    <input type="text" name="q" placeholder="Search">
    <button class="impact" type="submit">SUBMIT</button>
  </form>
</section>
User is logged in to an account:
<section class="flag full-bleed standard">
  <div class="paper front">
    <div class="top flex relative">
      <div class="flex icons">
        <button class="flex" onclick="showNavigation()">
          <svg viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
          <span class="h5 icon-label d-desktop">SECTIONS</span>
        </button>
        <a href="#" class="d-tablet">
          <svg viewBox="0 0 576 512"><path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"/></svg>
        </a>
        <a href="#" class="d-tablet">
          <svg viewBox="0 0 640 512"><path d="M575.2 325.7c.2-1.9.8-3.7.8-5.6 0-35.3-28.7-64-64-64-12.6 0-24.2 3.8-34.1 10-17.6-38.8-56.5-66-101.9-66-61.8 0-112 50.1-112 112 0 3 .7 5.8.9 8.7-49.6 3.7-88.9 44.7-88.9 95.3 0 53 43 96 96 96h272c53 0 96-43 96-96 0-42.1-27.2-77.4-64.8-90.4zm-430.4-22.6c-43.7-43.7-43.7-114.7 0-158.3 43.7-43.7 114.7-43.7 158.4 0 9.7 9.7 16.9 20.9 22.3 32.7 9.8-3.7 20.1-6 30.7-7.5L386 81.1c4-11.9-7.3-23.1-19.2-19.2L279 91.2 237.5 8.4C232-2.8 216-2.8 210.4 8.4L169 91.2 81.1 61.9C69.3 58 58 69.3 61.9 81.1l29.3 87.8-82.8 41.5c-11.2 5.6-11.2 21.5 0 27.1l82.8 41.4-29.3 87.8c-4 11.9 7.3 23.1 19.2 19.2l76.1-25.3c6.1-12.4 14-23.7 23.6-33.5-13.1-5.4-25.4-13.4-36-24zm-4.8-79.2c0 40.8 29.3 74.8 67.9 82.3 8-4.7 16.3-8.8 25.2-11.7 5.4-44.3 31-82.5 67.4-105C287.3 160.4 258 140 224 140c-46.3 0-84 37.6-84 83.9z"/></svg>
        </a>
        <svg class="d-desktop" onclick="toggleSearchForm()" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
      </div>
      <a class="market-logo" href="#">
        <img src="https://www.kansascity.com/wps/build/images/kansascity/logo.svg">
      </a>
      <div class="flex account relative">
        <div class="h5 expander" onclick="this.classList.toggle('open')">
          <span class="d-desktop">FULL NAME</span>
          <span class="h-desktop">FN</span>
        </div>
        <div class="popout paper sans">
          <a class="h5" href="#">PROFILE</a>
          <a class="h5" href="#">SUBSCRIPTIONS</a>
          <a class="h5" href="#">SIGN OUT</a>
        </div>
      </div>
    </div>
  </div><form class="search paper">
    <input type="text" name="q" placeholder="Search">
    <button class="impact" type="submit">SUBMIT</button>
  </form>
</section>
Homepage, User is logged in to an account
<section class="flag full-bleed homepage">
  <div class="paper front">
    <div class="top flex relative">
      <div class="flex icons">
        <button class="flex" onclick="showNavigation()">
          <svg viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
          <span class="h5 icon-label d-desktop">SECTIONS</span>
        </button>
        <a href="#" class="d-tablet">
          <svg viewBox="0 0 576 512"><path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"/></svg>
        </a>
        <a href="#" class="d-tablet">
          <svg viewBox="0 0 640 512"><path d="M575.2 325.7c.2-1.9.8-3.7.8-5.6 0-35.3-28.7-64-64-64-12.6 0-24.2 3.8-34.1 10-17.6-38.8-56.5-66-101.9-66-61.8 0-112 50.1-112 112 0 3 .7 5.8.9 8.7-49.6 3.7-88.9 44.7-88.9 95.3 0 53 43 96 96 96h272c53 0 96-43 96-96 0-42.1-27.2-77.4-64.8-90.4zm-430.4-22.6c-43.7-43.7-43.7-114.7 0-158.3 43.7-43.7 114.7-43.7 158.4 0 9.7 9.7 16.9 20.9 22.3 32.7 9.8-3.7 20.1-6 30.7-7.5L386 81.1c4-11.9-7.3-23.1-19.2-19.2L279 91.2 237.5 8.4C232-2.8 216-2.8 210.4 8.4L169 91.2 81.1 61.9C69.3 58 58 69.3 61.9 81.1l29.3 87.8-82.8 41.5c-11.2 5.6-11.2 21.5 0 27.1l82.8 41.4-29.3 87.8c-4 11.9 7.3 23.1 19.2 19.2l76.1-25.3c6.1-12.4 14-23.7 23.6-33.5-13.1-5.4-25.4-13.4-36-24zm-4.8-79.2c0 40.8 29.3 74.8 67.9 82.3 8-4.7 16.3-8.8 25.2-11.7 5.4-44.3 31-82.5 67.4-105C287.3 160.4 258 140 224 140c-46.3 0-84 37.6-84 83.9z"/></svg>
        </a>
        <svg class="d-desktop" onclick="toggleSearchForm()" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
      </div>
      <a class="market-logo" href="#">
        <img src="https://www.kansascity.com/wps/build/images/kansascity/logo.svg">
      </a>
      <div class="flex account relative">
        <div class="h5 expander" onclick="this.classList.toggle('open')">
          <span class="d-desktop">FULL NAME</span>
          <span class="h-desktop">FN</span>
        </div>
        <div class="popout paper sans">
          <a class="h5" href="#">PROFILE</a>
          <a class="h5" href="#">SUBSCRIPTIONS</a>
          <a class="h5" href="#">SIGN OUT</a>
        </div>
      </div>
    </div>
    <div class="flex bottom icons d-tablet">
      <a class="h5 active" href="#">HOME</a>
      <a class="h5" href="#">NEWS</a>
      <a class="h5" href="#">SPORTS</a>
      <a class="h5" href="#">POLITICS</a>
      <a class="h5" href="#" onclick="showNavigation()">MORE</a>
      
    </div>
    
  </div>
  
  
  
  
  
  <form class="search paper">
    <input type="text" name="q" placeholder="Search">
    <button class="impact" type="submit">SUBMIT</button>
  </form>
</section>
CARDS

author-card

Author information at the bottom of articles

big-news

Goes on the top of the homepage during large news events.

correction

A correction disclaimer for the top of a story.

digest

Headline stacks for section content.

flag

The top banner of the sites including the search panel and account popout

flex-columns

A flexbox version of the grid using the same rules.

footer

Standard footer for the bottom of all pages

form (DSP)

DSP form layout

gallery

Photo gallery to be used in all occasions.

grid

A very basic starter grid

header

An expanded package for article headers.

immersive

Immersive card to match the layout option.

in-depth

In depth module for section pages

inline-cta

Inline call to action for story display.

menu

Side menu panel tied to the hamburger.

modal

Simple overlay containers to maintain consistency.

paywall (DSP)

DSP paywall offer card

read-next

The custom read next card under story bodies.

related-stories

Display for stories related in CUE.

review-order (DSP)

DSP review-order card

section-nav

Top navigation for section fronts where applied in CUE

series-nav

Series nav for article pages.

sponsor

Grant/Sponsorship card for article pages.

swg-promo

Promo card for story and section pages

timeline

Used in live updates and for static timelines.

transparency

Provides story background information.

upper-nav

Top tab navigation used in niche verticals.

vendor-flag

A basic flag that can be used on 3rd-party sites in an iframe.

vendor-footer

A basic footer that can be used on 3rd-party sites in an iframe.

DECKS

author bio

A sample of the author bio page.

contests

An alternative grid and card arrangement for contests.

eEdition

A portal page with recent eEditions.

gallery

A CSS Grid version using the experimental rail code.

homepage

A sample homepage.

immersive

A sample story page.

Impact 2020

Priority vertical product page.

my account (DSP)

A sample account profile page.

paywall (DSP)

A sample paywall overlay page.

purchase flow (DSP)

A sample purchase flow sign up page.

search

Search results page.

section

A sample section page.

story

A sample story page.

subscription offers page (DSP)

DSP subscription offers page

topic

The topic layout.

MOLECULES
account header (DSP)
card
color themes
expander
impact
masthead (DSP)
offer details (DSP)
package
page title (DSP)
paper
primary offer (DSP)
progress bar (DSP)
purchase info (DSP)
secondary offer (DSP)
social-media
tertiary offer (DSP)
utilities
ATOMS
button
byline
figcaption
figure
h1
h2
h3
h4
h5
h6
inputs
label
lists
more-link
p
section
time