Component library for election pages.

Usage no npm install needed!

<script type="module">
  import politicoInteractiveStyleElections from 'https://cdn.skypack.dev/@politico/interactive-style-elections';



Component library for election pages.

Quick Start


$ yarn add @politico/interactive-style-elections

Import only what you need:

import { Logo } from '@politico/interactive-style-elections';

Use it in your component:

import React from 'react';

const MyComponent = () => (
  <Logo />

export default MyComponent;


Need to add a new headshot to the Headshot component?

Make sure you've added the candidate to the democratic candidates loader.

Create a .png file at 72ppi and at least 600px wide with an aspect ratio of 1:1.1.

Name the file the same as the generated slug of the candidate. These slugs are generated by combining the first and last name of the candidate with dashes (-). If they have a nickname, combine their nickname and last name the same way.

Put this file in the headshots folder.

Run the command to process and upload your headshot:

$ yarn build-headshots


Clone Repo:

$ git clone https://github.com/The-Politico/politico-interactive-style-elections

Install dependencies:

$ yarn

Start development server:

$ yarn start

Build assets:

$ yarn build

Publish changes:

$ yarn publish