Blog

Contents

Typography

h1. Talk to your company's data guru

h2. Talk to your company's data guru

h3. Talk to your company's data guru

h4. Talk to your company's data guru

h5. Talk to your company's data guru

If your company has a business analyst-type person, great! You’re ahead of the game. Try bringing your problem statement to them, because those folks get their kicks solving problems.

# h1 Headline
## h2 Headline
### h3 Headline
#### h4 Headline
##### h5 Headline
This is my first paragraph copy

Setting up posts

Page front matter

All post meta information is placed in front matter at the top of the page. Here’s a breakdown of those value definitions:

---
title: "Post Title"
page-title: "Page title (seo)"
description: page description (seo)
author: Post Author
date: post date
categories: 1 of 5 categories: [Growth, Support, Culture, Product, Popular]
img: /link/to/image.png
bg: 'hex value for feature background'
drop-cap: 'hex value for first letter in post'
permalink: /blog/post-url-here/
---

Post Header Images

Post illustrations should be designed at 1124px x 630px and positioned within the center of the canvas. See Illustration guidelines for some helpful tips on creating illustrations.

Illustration with guides

Images

Float images left or right

Floated images have a max-width of 50% and can be positioned on the left or right side. Just use class left or right.

image sample
<img class="right" src="/path/to/image.png" alt="">

Headshots

Headshot images have a set width of 150px and are styled with a grey border. Add class headshot left or right depending on desired placement in relation to the content.

image sample
<img class="headshot right" src="/path/to/image.jpg" alt="">

Thin border

Add class bdr.

image sample
<img class="bdr" src="/path/to/image.png" alt="">

Thick border

Add class bdr-large.

image sample
<img class="bdr-large" src="/path/to/image.png" alt="">

Captions

Captions require class imgCaption applied to an em directly following an asset such as an image or video.

image sample Here's the image caption
<em class="imgCaption">Here's the image caption</em>

Image Frame with Caption

image sample Here's the image caption
<figure class="bdr-large">
  <img src="/path/to/image.png" alt="">
  <em class="imgCaption">Here's the image caption</em>
</figure>

Subtle shadow

Add class shadow.

image sample
<img class="shadow" src="/path/to/image.png" alt="">

Browser Bar

Add class browser-bar.

image sample
<figure class="browser-bar">
  <img src="/path/to/image.png" alt="">
</figure>

Poster Images

Poster images extend outside of the content container by 100px on the left and right side and have a max-width of 890px. Good use cases are whenever your image contains text that is hard to read such as product screenshots or graphs.

image sample
{% poster %}
  <img src="/path/to/image.png" alt="">
{% endposter %}

Blockquotes

Standard

Well, you folks always give good advice on building a better response. But I want to see what the final product looks like.
> Well, you folks always give good advice on building a better response. But I want to see what the final product looks like.

Large

Large blockquotes extend outside of the content container by 100px on the left and right. Add class large to emphasize short but important sentences.

large blockquote sample
<blockquote class="large">...</blockquote>

Remember All large blockquotes are sharable on Twitter by default.


Lists

Definition Lists

Definition lists are a great way to nicely format numbered lists. We use this for many of our curated posts.

1. Compliments for the support.

The most important section, in my opinion. Here’s where you should share a few quotes from customers who contacted support and walked away thoroughly pleased.

2. Praise for the product.

Whether from a new sign-up or a longtime customer who noticed detail-oriented polish, it’s nice to hear the product you support is having a meaningful impact on the people who use it.

<dl>
  <dt>
    <span>1. </span>Title
  </dt>
  <dd>
    <p>...</p>
  </dd>
  <dt>
    <span>2. </span>Title
  </dt>
  <dd>
    <p>...</p>
  </dd>
</dl>

Callouts

Callouts are a great way to highlight content. Default background color is grey, but add class blue or yellow for some color variation.

Remember that a new blog design isn’t just a new coat of paint. Identify and build around reader incentives and your most important objectives.

Remember that a new blog design isn’t just a new coat of paint. Identify and build around reader incentives and your most important objectives.

Remember that a new blog design isn’t just a new coat of paint. Identify and build around reader incentives and your most important objectives.

Remember that a new blog design isn’t just a new coat of paint. Identify and build around reader incentives and your most important objectives.

<p class="callout transparent">...</p>

<p class="callout">...</p>

<div class="callout blue">
  <p>...</p>
  <p>...</p>
</div>

<p class="callout yellow">...</p>

Breakouts

Breakout sections do just that—break out of the content container and extend to the full width of the browser with whatever content is put inside. Just use the {% breakout %} template block.

Images

Images will fill 100% width and height of the breakout container.

image sample
{% breakout %}
  <img src="/path/to/image.png" alt="">
{% endbreakout %}

Content

You can also fill a breakout section with content and a background color. It’s a great way to section off content and add emphasis!

image sample
{% breakout class:"t-bg-green-400" %}
  <div class="s-content-width">
    <p>...</p>
  </div>
{% endbreakout %}

Sharing

Allow any string of text to be sharable on Twitter by wrapping it in the {% tweet %} template block.

{% tweet %}Copy you want to share on Twitter{% endtweet %}