ferris-ds 🎡

Design system for WBEZ.org

Version: 6.0.2

GitHub data updated: Jan 29, 2020

Cookbook

Components and classes for digital editors to drop into stories.

Cookbook > Card

Card

Sections set apart from the main story text.

Typically, we'll add the class to an <aside> HTML element; this indicates that the card content is separate from the main content.


Example uses:

  • methodology box
  • collection refer
  • sidebar (in the newspaper sense of the word)

Class modifiers:

  • pull-right — float the card right
  • pull-left — float the card left
.wbz-card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<aside class="wbz-card {{className}}">
  <h2 class="h4">What's in the video?</h2>
  <p>
    The video shows Van Dyke shooting McDonald.
  </p>
  <p>
    The
    <a href="https://www.youtube.com/watch?v=Ix2N6_jLAgA"
      >nearly seven-minute video</a
    >, recorded on a police dashcam, mostly shows officers on their way to
    McDonald, who was suspected of breaking into trucks and slashing the tire of
    a police car. The
    <a
      href="http://www.chicagotribune.com/news/ct-chicago-cop-shooting-video-laquan-mcdonald-charges-20151124-story.html"
      >final minutes</a
    >
    show Van Dyke exit a police SUV and open fire within seconds. McDonald falls
    to the ground, bullets keep hitting him, and an officer eventually kicks
    away the knife in his hand. McDonald lies on the pavement and receives no
    immediate aid. The video has no audio.
  </p>
</aside>
.pull-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Card floated right

.pull-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Card floated left

Cookbook > Dropcap

Dropcap

Drop caps are illustrative elements to emphasize the beginnings of new sections.

The preferred way to add a drop cap is to add the class wbz-has-dropcap to the text element.

<p class="wbz-has-dropcap">
  West of downtown Chicago, …
</p>

Alternately, add the class wbz-dropcap to a <span> element surrounding a single letter.

 <p class="l-clearfix">
   <span class="wbz-dropcap">W</span>est of downtown Chicago, …
 </p>

Class modifiers:

  • sans — use sans typeface
  • serif — use serif typeface

TK: Per-letter variants — see here

.wbz-has-dropcap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

West of downtown Chicago, on any given day, at any given hour, people arrive at a massive car lot — a sea of vehicles backdropped against the gleaming skyline.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<p class="wbz-has-dropcap {{ className }}">
  West of downtown Chicago, on any given day, at any given hour, people arrive
  at a massive car lot — a sea of vehicles backdropped against the gleaming
  skyline.
</p>
.sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

West of downtown Chicago, on any given day, at any given hour, people arrive at a massive car lot — a sea of vehicles backdropped against the gleaming skyline.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

.serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

West of downtown Chicago, on any given day, at any given hour, people arrive at a massive car lot — a sea of vehicles backdropped against the gleaming skyline.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Cookbook > Hairline

Hairline

A thematic break between content sections.

This needs to be applied to an <hr> element.


CMS notes:

  • No need to use this class. Our site applies the styles to <hr> elements automatically.
.wbz-hairline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<hr class="wbz-hairline" />
Cookbook > Headings

Headings

The <h1><h6> elements represent six levels of headings.

The wbz-heading class adds styling and default margins to each heading level.


General notes:

  • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on. (Source: MDN)
  • Do not use a heading element for restyling; use a heading class instead. (e.g. <div class="wbz-heading h5">)

CMS notes:

  • No need to use this class. Our site applies the styles to <h1><h6> elements automatically.
  • Use <h3> and <h4> elements in the story editor; these are automatically converted to the appropriate level.

Class modifiers:

  • h1h6 — overrides the element heading style with the heading level styles (e.g. <h2 class="h4"> will look like an <h4>)
wbz-heading
.h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

h1: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

.h2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

h2: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

.h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

h3: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

.h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

h4: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

.h5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

h5: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

.h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

h6: Story headline text with link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Cookbook > Image

Image

An image in a story, typically with a caption and credit.

This should be applied to a <figure> element.


General notes:

  • It's good practice to define an image height and width; this makes it possible for the browser to predictably lay out the page without screen jerk. (Our CMS inline image tool does this automatically.)
<img src="…" width="400" height="300" alt="…">

CMS notes:

  • No need to use this class. Our site applies the styles automatically.

  • Our CMS has a particular markup spec, generated by the inline image tool …

<!-- before -->
<img src="https://cdn.wbez.org/image/370813afc24045d7f938ede2243fdbc0" title="Portrait of Jacob Owen and Meghan Williams" data-source="WBEZ" data-img-id="6fc16e99-93c6-4605-8e87-315a80be39ee" data-byline="Manuel Martinez" data-caption="Jacob Owen (left) and Meghan Williams decided to get matching tattoos on a whim." style="width: 50%;" data-width="2240" data-height="3360" class="center-block">
  • … which our site compiles to a proper <figure> element.
<!-- after -->
<figure class="center-block" style="width: 50%;">
  <img src="https://api.wbez.org/v2/images/6fc16e99-93c6-4605-8e87-315a80be39ee.jpg?width=900&amp;height=1350&amp;mode=FILL" height="1350" width="900" alt="Portrait of Jacob Owen and Meghan Williams">
  <figcaption class="c-caption">
    <span>Jacob Owen (left) and Meghan Williams decided to get matching tattoos on a whim.</span>
    <span class="c-caption__credit">Manuel Martinez / WBEZ</span>
  </figcaption>
</figure>

Class modifiers:

  • no-gutter-mobile — Stretch the image to the full screen width on mobile. (Must be the child of a centered block to work properly.)
.wbz-image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Example image
Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<figure class="wbz-image {{ className }}">
  <img src="https://picsum.photos/800/420?random" alt="Example image" />
  <figcaption class="c-caption">
    Terra cotta details hint at the businesses that formerly occupied these
    spaces.
    <span class="c-caption__credit">Jason Marck/WBEZ</span>
  </figcaption>
</figure>
.no-gutter-mobile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Example image
Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Cookbook > Image diptych

Image diptych

Use the class wbz-diptych on a <figure> or <div> to display images side-by-side.

.wbz-diptych

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.


Side by side images

If you want to display two images with independent captions side-by-side, wrap the two <figure> elements in a <div> classed wbz-diptych.

CMS implementation
<div class="wbz-diptych">
  <img src="…" data-img-id="…">
  <img src="…" data-img-id="…">
</div>
Example image
A: Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ
Example image
B: Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Side by side images, plus merged caption

If you want to display two images side-by-side with a shared caption, wrap the two <img> elements in a <div> classed wbz-diptych, within a <figure> element.

CMS implementation
<figure class="wbz-image wbz-diptych">
  <img src="…" data-img-id="…">
  <img src="…" data-img-id="…">
  <figcaption>…</figcaption>
</figure>
Example image Example image
Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Side by side images, plus merged caption, plus multiple sizes

You can also nest a <div> classed wbz-diptych inside of a <figure> element, creating a grid of images.

CMS implementation
<figure class="wbz-image">
  <img src="…" data-img-id="…">

  <div class="wbz-diptych">
    <img src="…" data-img-id="…">
    <img src="…" data-img-id="…">
  </div>
  
  <figcaption>…</figcaption>
</figure>
Example image
Example image Example image
Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<hr class="wbz-hairline" />

<h4 class="wbz-heading">Side by side images</h4>

<p>
  If you want to display two images with independent captions side-by-side, wrap
  the two <code>&lt;figure&gt;</code> elements in a
  <code>&lt;div&gt;</code> classed <code>wbz-diptych</code>.
</p>

<details>
  <summary><strong>CMS implementation</strong></summary>
  <pre class="hljs language-html">
&lt;div class="wbz-diptych"&gt;
  &lt;img src="&hellip;" data-img-id="&hellip;"&gt;
  &lt;img src="&hellip;" data-img-id="&hellip;"&gt;
&lt;/div&gt;</pre
  >
</details>

<div class="wbz-diptych">
  <figure class="wbz-image">
    <img src="https://picsum.photos/800/420?random" alt="Example image" />
    <figcaption class="c-caption">
      A: Terra cotta details hint at the businesses that formerly occupied these
      spaces.
      <span class="c-caption__credit">Jason Marck/WBEZ</span>
    </figcaption>
  </figure>
  <figure class="wbz-image">
    <img src="https://picsum.photos/800/420?random" alt="Example image" />
    <figcaption class="c-caption">
      B: Terra cotta details hint at the businesses that formerly occupied these
      spaces.
      <span class="c-caption__credit">Jason Marck/WBEZ</span>
    </figcaption>
  </figure>
</div>

<hr class="wbz-hairline" />

<h4 class="wbz-heading">Side by side images, plus merged caption</h4>

<p>
  If you want to display two images side-by-side with a shared caption, wrap the
  two <code>&lt;img&gt;</code> elements in a <code>&lt;div&gt;</code> classed
  <code>wbz-diptych</code>, within a <code>&lt;figure&gt;</code> element.
</p>

<details>
  <summary><strong>CMS implementation</strong></summary>
  <pre class="hljs language-html">
&lt;figure class="wbz-image wbz-diptych"&gt;
  &lt;img src="&hellip;" data-img-id="&hellip;"&gt;
  &lt;img src="&hellip;" data-img-id="&hellip;"&gt;
  &lt;figcaption&gt;&hellip;&lt;/figcaption&gt;
&lt;/figure&gt;</pre
  >
</details>

<figure class="wbz-image wbz-diptych">
  <img src="https://picsum.photos/800/420?random" alt="Example image" />
  <img src="https://picsum.photos/800/420?random" alt="Example image" />
  <figcaption class="c-caption">
    Terra cotta details hint at the businesses that formerly occupied these
    spaces.
    <span class="c-caption__credit">Jason Marck/WBEZ</span>
  </figcaption>
</figure>

<hr class="wbz-hairline" />

<h4 class="wbz-heading">
  Side by side images, plus merged caption, plus multiple sizes
</h4>

<p>
  You can also nest a <code>&lt;div&gt;</code> classed <code>wbz-diptych</code>
  <em>inside</em> of a <code>&lt;figure&gt;</code> element, creating a grid of
  images.
</p>

<details>
  <summary><strong>CMS implementation</strong></summary>
  <pre class="hljs language-html">
&lt;figure class="wbz-image"&gt;
  &lt;img src="&hellip;" data-img-id="&hellip;"&gt;

  &lt;div class="wbz-diptych"&gt;
    &lt;img src="&hellip;" data-img-id="&hellip;"&gt;
    &lt;img src="&hellip;" data-img-id="&hellip;"&gt;
  &lt;/div&gt;
  
  &lt;figcaption&gt;&hellip;&lt;/figcaption&gt;
&lt;/figure&gt;</pre
  >
</details>

<figure class="wbz-image">
  <img src="https://picsum.photos/1600/900?random" alt="Example image" />

  <div class="wbz-diptych">
    <img src="https://picsum.photos/800/420?random" alt="Example image" />
    <img src="https://picsum.photos/800/420?random" alt="Example image" />
  </div>

  <figcaption class="c-caption">
    Terra cotta details hint at the businesses that formerly occupied these
    spaces.
    <span class="c-caption__credit">Jason Marck/WBEZ</span>
  </figcaption>
</figure>

<hr class="wbz-hairline" />
Cookbook > Lists

Lists

Both bulleted (unordered) and numbered (ordered) lists should be given the wbz-list class.

The <ul> element is an unordered list, typically represented as bullets. The <ol> element is an ordered list, typically represented with numbers.


CMS notes:

  • No need to use this class. Our site applies the styles to <ul> and <ol> elements automatically.

Class modifiers:

  • wbz-list-compact — reduces the whitespace between list items
.wbz-list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.


Bulleted list, <ul>

  • Marty Quinn, the alderman of Madigan’s power base in Chicago’s 13th Ward.
    • Nested list item A
    • Nested list item B
  • Kevin Quinn, the alderman’s brother who was a top campaign operative for Madigan until he was accused of sexual harassment two years ago.

Numbered list <ol>

  1. Marty Quinn, the alderman of Madigan’s power base in Chicago’s 13th Ward.
    1. Nested list item A
    2. Nested list item B
  2. Kevin Quinn, the alderman’s brother who was a top campaign operative for Madigan until he was accused of sexual harassment two years ago.

List with breaks

We may need to nest multiple paragraphs within a single list item. There a couple of supported approaches:

  • This list item comprises two <p> elements. Here's the first paragraph.

    And here's the second paragraph.

  • This list item comprises text and <br> elements. Here's the first block of text, and then a <br>.
    Here's the second block of text.

Compact lists

The default list styling may be too spacious for your use case. If that's the case, add the wbz-list-compact modifier class:

  1. List item
  2. List item
    1. Nested list
  • List item
  • List item
    • Nested list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<hr class="wbz-hairline" />

<h4 class="wbz-heading">Bulleted list, <code>&lt;ul&gt;</code></h4>

<ul class="wbz-list">
  <li>
    Marty Quinn, the alderman of Madigan’s power base in Chicago’s 13th Ward.

    <ul class="wbz-list">
      <li>Nested list item A</li>
      <li>Nested list item B</li>
    </ul>
  </li>

  <li>
    Kevin Quinn, the alderman’s brother who was a top campaign operative for
    Madigan until he was accused of sexual harassment two years ago.
  </li>
</ul>

<hr class="wbz-hairline" />

<h4 class="wbz-heading">Numbered list <code>&lt;ol&gt;</code></h4>

<ol class="wbz-list">
  <li>
    Marty Quinn, the alderman of Madigan’s power base in Chicago’s 13th Ward.

    <ol class="wbz-list">
      <li>Nested list item A</li>
      <li>Nested list item B</li>
    </ol>
  </li>

  <li>
    Kevin Quinn, the alderman’s brother who was a top campaign operative for
    Madigan until he was accused of sexual harassment two years ago.
  </li>
</ol>

<hr class="wbz-hairline" />

<h4 class="wbz-heading">List with breaks</h4>

<p>
  We may need to nest multiple paragraphs within a single list item. There a
  couple of supported approaches:
</p>

<ul class="wbz-list">
  <li>
    <p>
      This list item comprises two <code>&lt;p&gt;</code> elements. Here's the
      first paragraph.
    </p>
    <p>
      And here's the second paragraph.
    </p>
  </li>

  <li>
    This list item comprises text and <code>&lt;br&gt;</code> elements. Here's
    the first block of text, and then a <code>&lt;br&gt;</code>.<br />
    Here's the second block of text.
  </li>
</ul>

<hr class="wbz-hairline" />

<h4 class="wbz-heading">Compact lists</h4>

<p>
  The default list styling may be too spacious for your use case. If that's the
  case, add the <code>wbz-list-compact</code> modifier class:
</p>

<ol class="wbz-list wbz-list-compact">
  <li>List item</li>
  <li>
    List item
    <ol class="wbz-list wbz-list-compact">
      <li>Nested list</li>
    </ol>
  </li>
</ol>

<ul class="wbz-list wbz-list-compact">
  <li>List item</li>
  <li>
    List item
    <ul class="wbz-list wbz-list-compact">
      <li>Nested list</li>
    </ul>
  </li>
</ul>

<hr class="wbz-hairline" />
Cookbook > Pullquote

Pullquote

Pullquotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the article.

Add the wbz-pullquote class to an <aside> HTML element; this indicates that the pullquote is separate from the main content.


Optional styled child elements:

  • <footer> — Information about the speaker of the pullquote, copyright data or links to related documents
  • <cite> — Citation element, to reference the source of the quoted material

Class modifiers:

  • pull-right — float the card right
  • pull-left — float the card left
.wbz-pullquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<aside class="wbz-pullquote {{ className }}">
  <p>
    “For a lot of students, it’s a basic, strong foundation of literacy, and
    that takes time. You can’t do those things simultaneously.”
  </p>
  <footer>— <cite>Tara Whitehair, Wright College professor</cite></footer>
</aside>
.pull-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Card floated right

.pull-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Card floated left

Cookbook > Responsive embed

Responsive embed

Add the wbz-responsive-embed class to an element's container to preserve the element's aspect ratio on different screen widths.


Example uses:

  • YouTube embed
  • Facebook video embed

General notes:

  • The default aspect ratio is 16:9.
  • To override the default aspect ratio, you have a couple of options:
    • Add an explicit padding-bottom style, representing the aspect ratio as height divided by width
    <!-- 4:3 aspect ratio -->
    <div class="wbz-responsive-embed" style="padding-bottom: 75%;">
      <iframe src="…">
    </div>
    
    • Set the --aspect-ratio custom css property, representing the aspect ratio as width divided by height
    <!-- 4:3 aspect ratio -->
    <div class="wbz-responsive-embed" style="--aspect-ratio: 4 / 3;">
      <iframe src="…">
    </div>
    

Class modifiers:

  • no-gutter-mobile — Stretch the embed to the full screen width on mobile. (Must be the child of a centered block to work properly.)
.wbz-responsive-embed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<figure>
  <div class="wbz-responsive-embed {{ className }}">
    <iframe
      src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fcuriouscityproject%2Fvideos%2F1568262193281751%2F&amp;show_text=0&amp;width=560"
      width="560"
      height="315"
      scrolling="no"
      frameborder="0"
      allowtransparency="true"
      allowfullscreen="allowfullscreen"
      style="border: none; overflow: hidden;"
    ></iframe>
  </div>
  <figcaption class="c-caption">
    Terra cotta details hint at the businesses that formerly occupied these
    spaces.
    <span class="c-caption__credit">Jason Marck/WBEZ</span>
  </figcaption>
</figure>
.no-gutter-mobile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Terra cotta details hint at the businesses that formerly occupied these spaces. Jason Marck/WBEZ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Cookbook > Table

Table

Add the class wbz-table to a <table> element.


CMS notes:

  • No need to use this class. Our site applies the styles automatically.
.wbz-table

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

Fiscal year Budget appropriation Actual amount spent Difference
2015 $36,643,592 $109,563,735 -$72,920,143
2016 $45,619,150 $59,643,597 -$14,024,447
2017 $46,798,050 $51,210,156 -$4,412,106
2018 $46,798,050 $141,681,008 -$94,882,958
2019 $61,953,700 $19,188,186*
2020 $152,900,000**
*Amount spent as of April 30, 2019.
**FY2020 Budget Forecast

Source: City of Chicago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<table class="wbz-table">
  <thead>
    <tr>
      <th>Fiscal year</th>
      <th>Budget appropriation</th>
      <th>Actual amount spent</th>
      <th>Difference</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>2015</td>
      <td>$36,643,592</td>
      <td>$109,563,735</td>
      <td>-$72,920,143</td>
    </tr>
    <tr>
      <td>2016</td>
      <td>$45,619,150</td>
      <td>$59,643,597</td>
      <td>-$14,024,447</td>
    </tr>
    <tr>
      <td>2017</td>
      <td>$46,798,050</td>
      <td>$51,210,156</td>
      <td>-$4,412,106</td>
    </tr>
    <tr>
      <td>2018</td>
      <td>$46,798,050</td>
      <td>$141,681,008</td>
      <td>-$94,882,958</td>
    </tr>
    <tr>
      <td>2019</td>
      <td>$61,953,700</td>
      <td>$19,188,186*</td>
      <td></td>
    </tr>
    <tr>
      <td>2020</td>
      <td>$152,900,000**</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <caption>
    <em>*Amount spent as of April 30, 2019.</em>
    <br />
    <em>**FY2020 Budget Forecast</em>
    <br /><br />
    <strong>Source: City of Chicago</strong>
  </caption>
</table>
Cookbook > Utilities

Utilities

The cookbook includes a few utility classes, to be freely used within the CMS.

Class Description
center-block Centers the element, provided it has a defined width.
clearfix Apply to parent container of floated elements, to prevent float overflow
full-width Full width
no-gutter-mobile Full width, mobile only
pull-left Float the element left
pull-right Float the element right
sr-only Visually hidden, but visible to screen readers

 

Cookbook > Blockquote

Blockquote

Blockquotes refer to some external citation which isn’t already mentioned in the article. They are usually placed within the reader’s flow.

This class applies to <blockquote> elements only.


CMS notes:

  • No need to use this class. Our site applies the styles to <blockquote> elements automatically.

Optional styled child elements:

  • <footer> — Information about the author of the blockquote, copyright data or links to related documents
  • <cite> — Citation element, to reference the source of the quoted material
.wbz-blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

“I couldn't help but wonder about the name. How did it originate? Was it half a day's journey walking or riding a horse from some place to another; to Topeka, eight miles south, for instance? I know that there are streams on trails through the area that are named because they mark distances. For example, 110 Mile Creek on the Santa Fe Trail. But that's more exact. Half Day, like Elmont, is so unspecific.”

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa at ante porta, at pellentesque tellus vulputate. Vivamus tempus tempor turpis sed finibus. Ut pulvinar eros pulvinar turpis varius porttitor.

HTML Example
<blockquote class="wbz-blockquote">
  <p>
    “I couldn't help but wonder about the name. How did it originate? Was it
    half a day's journey walking or riding a horse from some place to another;
    to Topeka, eight miles south, for instance? I know that there are streams on
    trails through the area that are named because they mark distances. For
    example, 110 Mile Creek on the Santa Fe Trail. But that's more exact. Half
    Day, like Elmont, is so unspecific.”
  </p>

  <footer>
    From
    <cite>
      <a href="http://www.george-orwell.org/1984/0.html"
        >Nineteen Eighty-Four</a
      >
    </cite>
    by George Orwell
  </footer>
</blockquote>