Cookbook
Components and classes for digital editors to drop into stories.
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 rightpull-left— float the card left
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 typefaceserif— use serif typeface
TK: Per-letter variants — see here
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.
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:
h1–h6— overrides the element heading style with the heading level styles (e.g.<h2 class="h4">will look like an<h4>)
wbz-heading
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&height=1350&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.)
Image diptych
Use the class wbz-diptych on a <figure> or <div> to display images side-by-side.
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
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 rightpull-left— float the card left
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-bottomstyle, 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-ratiocustom 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> - Add an explicit
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.)
Table
Add the class wbz-table to a <table> element.
CMS notes:
- No need to use this class. Our site applies the styles automatically.
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 |
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.