Styleguide contents
Components
- Client quote
- Device screenshot
- Image hero
- Image with attribution
- Post image
- Narrow content
- Story
- Text hero
- Warning
Typography
- Paragraph
- Heading 1
- Heading 2
- Heading 3
- Heading 4
Components
Client quote
Thephoto is optional.
I can't say enough good things about the site. You did a spectacular job. Thank you! It's been a very good experience working with you.
{% include client-quote.html
quote="I can't say enough good things about the site. You did a spectacular job. Thank
you! It's been a very good experience working with you."
author="Barbara Drogo, Cornell University Communications"
photo="/images/people/silhouette.png"
%}
Device screenshot
<img src="/images/work/yale-university-addiction-rehabilitation/screenshot-desktop.png"
class="sb-device-screenshot--desktop">
<img src="/images/work/yale-university-addiction-rehabilitation/screenshot-tablet.png"
class="sb-device-screenshot--tablet">
Image hero
Image Hero with a lovely picture
I am a teaser. I can include bold text, links, and other html.
{% include image-hero.html
headline='Image Hero with a lovely picture'
image='/images/2016/2016-03-21-co-working-space-available-at-singlebrook-s-ithaca-office/ben.jpg'
metadata1='Metadata 1'
metadata2='Metadata 2'
teaser='I am a teaser. I can include <b>bold text</b>, <a href="/">links</a>, and other html.'
attribution='(Photo by Leon Miller-Out)'
url='/'
%}
Image with attribution
Post image
{% include post-image.html name='analytics_screenshot.png'
caption='Smaller values mean faster page loads. Can you tell when we launched the new site?' %}
Narrow content
Even if there is a lot of text and really long, run-on sentences and the viewer's browser has a very wide viewport, this content will be limited in width for readability.
Alternatively, you can set `layout: narrow' in your page's front matter to make the entire page narrow.
Story
Story Block with a photo
This component is designed to be full-bleed. That's why the styleguide ends its .container before showing this.
For pages that use it, you can use the no-container layout and provide your own .container's around your other content.
Text hero
Text Hero with moderately long headline
I am a teaser, a short introduction to the target of the headline. I can include...
...line breaks.
{% include text-hero.html
headline='Text Hero with moderately long headline'
metadata1='Metadata 1'
metadata2='Metadata 2'
teaser='I am a teaser, a short introduction to the target of the headline. I can include...<br>...line breaks.'
url='/'
%}