@politico/interactive-style

Components, colors, and mixins for consistently styling all of our POLITITCO interactive pages.

Installation


// with npm
npm install @politico/interactive-style
// with yarn
yarn add @politico/interactive-style

Importing


// Import the entire library and use components through dot notation
import Style from '@politico/interactive-style';
return (
  <Style.Headline>Hello World</Style.Headline>
)
// Or import components individually
import { Headline } from '@politico/interactive-style';
return (
  <Headline>Hello World</Headline>
)
// Or import components directly
import Headline from '@politico/interactive-style/src/components/Headline';
return (
  <Headline>Hello World</Headline>
)

Sandbox

Use the space below to test out any of the components in this library.

White House

Trump’s base escapes the worst of job losses

Compared to the Great Recession, fewer male and blue-collar workers have lost jobs, while women, Latinos, African Americans and young workers have been hit hardest.

By First Lastname | 1/1/1970 9 AM EST

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div>
  <SkipNav />

  <Navigation />

  <Share />

  <Section href="https://www.politico.com/white-house">
    White House
  </Section>

  <Headline>
    Trump’s base escapes the worst of job losses
  </Headline>

  <Dek>
    Compared to the Great Recession, fewer male and blue-collar
    workers have lost jobs, while women, Latinos, African Americans and
    young workers have been hit hardest.
  </Dek>

  <Info
    authors={[
      {
        link: 'https://politico.com',
        name: 'First Lastname',
      },
    ]}
    published = {new Date('January 1, 1970 9:00:00').toISOString()}
  />

  <SkipToMainContent />
  
  <P>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat.
  </P>
  <P>
    Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </P>

  <Ad type="cube" />

  <P>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat.
  </P>

  <Footer />
</div>

<div>
  <SkipNav />
  <Navigation />
  <Share />
  <Section href="https://www.politico.com/white-house">
    White House
  </Section>
  <Headline>
    Trump’s base escapes the worst of job losses
  </Headline>
  <Dek>
    Compared to the Great Recession, fewer male and blue-collar
    workers have lost jobs, while women, Latinos, African Americans and
    young workers have been hit hardest.
  </Dek>
  <Info
    authors={[
      {
        link: 'https://politico.com',
        name: 'First Lastname',
      },
    ]}
    published = {new Date('January 1, 1970 9:00:00').toISOString()}
  />
  <SkipToMainContent />
  
  <P>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat.
  </P>
  <P>
    Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </P>
  <Ad type="cube" />
  <P>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat.
  </P>
  <Footer />
</div>