hidden

Typography

This is the Wine Folly typo page which can be used as a reference for writing new posts on winefolly.com

Table of Contents


Headings

Heading Level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading Level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading Level 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading Level 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading Level 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Text Formatting

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

Text styles

UIkit offers various text utlities to style your text.

Class Description
.uk-text-small Add this class to decrease the font size.
.uk-text-large Add this class to increase the font size.
.uk-text-bold Add this class to create bold text.
.uk-text-muted Add this class to mute your text.
.uk-text-primary Add this class for additional text information.
.uk-text-success Add this class to indicate success.
.uk-text-warning Add this class to indicate a warning.
.uk-text-danger Add this class to indicate danger.
.uk-text-contrast Add this class to make the text color readable on flat color areas or pictures. It’s often white.
.uk-text-capitalize Add this class to capitalize the text.
.uk-text-lowercase Add this class to make the text lowercase.
.uk-text-uppercase Add this class to make the text uppercase.

Text alignment

Add one of these useful classes to align your text.

Class Description
.uk-text-left Aligns text to the left.
.uk-text-left-small Aligns text to the left only on small devices.
.uk-text-left-medium Aligns text to the left on medium and small devices.
.uk-text-right Aligns text to the right.
.uk-text-center Centers text horizontally.
.uk-text-center-small Centers text horizontally only on small devices.
.uk-text-center-medium Centers text horizontally on medium and small devices.
.uk-text-justify Justifies text.

Quotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code

<blockquote>
  <p>Quote here</p>
</blockquote>

Output

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

<blockquote class="quote">
  <p>Quote here</p>
</blockquote>

Output

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.


Images

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Buttons

Default

Code

<a href="#" class="button button-large">Large</a>
<a href="#" class="button button-medium">Medium</a>
<a href="#" class="button">Button</a>
<a href="#" class="button button-small">Small</a>

Output

Primary

Code

<a href="#" class="button button-primary button-large">Large</a>
<a href="#" class="button button-primary button-medium">Medium</a>
<a href="#" class="button button-primary">Button</a>
<a href="#" class="button button-primary button-small">Small</a>

Output

Secondary

Code

<a href="#" class="button button-secondary button-large">Large</a>
<a href="#" class="button button-secondary button-medium">Medium</a>
<a href="#" class="button button-secondary">Button</a>
<a href="#" class="button button-secondary button-small">Small</a>

Output

Tertiary

Code

<a href="#" class="button button-tertiary button-large">Large</a>
<a href="#" class="button button-tertiary button-medium">Medium</a>
<a href="#" class="button button-tertiary">Button</a>
<a href="#" class="button button-tertiary button-small">Small</a>

Output


Lists

Default

Unordered List

Code

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Output
  • List item
  • List item
  • List item
  • List item
  • List item

Ordered List

Code

<ol>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
</ol>

Output
  1. List item
  2. List item
  3. List item
  4. List item
  5. List item

Styles

Reset

Code

<ul class="uk-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Output
  • List item
  • List item
  • List item
  • List item
  • List item

Definition Lists

Default

Code

<dl>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
</dl>

Output
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description

Horizontal

Code

<dl class="dl-horizontal">
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
  <dt>Defintion Term</dt>
  <dd>Definition Description</dd>
</dl>

Output
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description

Horizontal with label

Code

<dl class="dl-horizontal">
  <dt><span class="label">Defintion Term</span></dt>
  <dd>Definition Description</dd>
  <dt><span class="label">Defintion Term</span></dt>
  <dd>Definition Description</dd>
  <dt><span class="label">Defintion Term</span></dt>
  <dd>Definition Description</dd>
  <dt><span class="label">Defintion Term</span></dt>
  <dd>Definition Description</dd>
  <dt><span class="label">Defintion Term</span></dt>
  <dd>Definition Description</dd>
</dl>

Output
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description
Defintion Term
Definition Description

Alerts

Default

Code

<p class="alert"><strong>Default</strong> This is an alert.</p>

Output

Default This is an alert.

Success

Code

<p class="alert alert-success"><strong>Success</strong> This is a success alert.</p>

Output

Success This is a success alert.

Warning

Code

<p class="alert alert-warning"><strong>Error</strong> This is a warning alert.</p>

Output

Error This is a warning alert.

Info

Code

<p class="alert alert-info"><strong>Error</strong> This is a info alert.</p>

Output

Error This is a info alert.

Error

Code

<p class="alert alert-error"><strong>Error</strong> This is an error alert.</p>

Output

Error This is an error alert.


Icons

We’re using FontAwesome (v4.7) via a CDN.

Code: <i class="fa fa-glass"></i>

Output

View the full list of icons on the FontAwesome site

Note: You can also use entity codes (by copying and pasting into the content) for things like arrows, emojis, etc. See here for a comprehensive list.


Wistia

Examples of how to add Wistia videos to posts

Code

[wistia id="z62wr26zy9" width="960" height="550" caption="This is a video caption"]

Available attributes

id
The Wistia video id (required)
width
The video width (required)
height
The video height (required)
caption
Video caption (optional)

Output

This is a video caption

Utility Classes

.uk-margin
Adds top and bottom margin to the element it’s added to.
.uk-margin-top
Adds margin-top to the element it’s added to.
.uk-margin-bottom
Adds margin-bottom to the element it’s added to.
.uk-margin-left
Adds margin-left to the element it’s added to.
.uk-margin-right
Adds margin-right to the element it’s added to.
.uk-list
Strips default list styling.
.uk-text-center
Centers content.
.uk-flex
Adds flex layout to the element it’s added to (usually a div)
.uk-flex-align-middle
Vertically aligns flex items (added to the same element that has the .uk-flex class).
.uk-flex-align-middle
Vertically aligns flex items (added to the same element that has the .uk-flex class).
.soften
Adds the faded out sides to horizontal rules it’s added to.
.muted
Changes the text color to light grey.
.pull-left
Pulls the element out of the content flow (to the left).
.pull-right
Pulls the element out of the content flow (to the right).
.panel
Adds a light grey background and padding to the element.

Flexible Layouts

Flexbox gives us a bunch of awesome tools for creating a variety of layouts.

Class Description
.uk-flex-center Add this class to center flex items horizontally.
.uk-flex-right Add this class to align flex items to the right.
.uk-flex-top Add this class to align flex items to the top.
.uk-flex-middle Add this class to vertically center flex items.
.uk-flex-bottom Add this class to align flex items to the bottom.
.uk-flex-space-between Add this class to distribute items evenly, with the first item at the beginning and last item at the end of the main axis.
.uk-flex-space-around Add this class to distribute items evenly with equal space on both sides of each item.
.uk-flex-item-none The box’s size is determined by its content.
.uk-flex-item-auto The space is allocated considering the item’s content.
.uk-flex-item-1 The space is allocated solely based on flex.

Shortcodes

Newsletter

The newsletter shortcode will output the full newsletter signup form. The attributes listed below can be used to customize the newsletter output to be relevant to the context in which it is used.

Code: [newsletter title="" description="" button_text="" style=""]

Available attributes

title
“Love Wine? Stay In The Know”
description
“Join thousands of wine enthusiasts who subscribe to Wine Folly’s weekly wine newsletter. Never miss a tip that will get you drinking better wine.”
button_text
“Subscribe”
style
“default | primary | secondary | none”

Output


Feature

Simple shortcode to output a line of text with a call to action button.

Code

[feature href="" buttontext=""]Text here[/feature]

Output

Basic Wine GuideSee another awesome wine poster

SuperQuote

Simple shortcode to output a quote.

Code

[superquote]Your quote[/superquote]

Output

Your quote

SuperTagline

Simple shortcode to output a tagline.

Code

[supertagline]Your content[/supertagline]

Output


Your content



Embed

Shortcode to embed some code.

Code

[[embedcode rows="4"]Your content[/embedcode]]

Note: You need to encode any html you want to embed. Simply paste the code you want to embed into this tool and it’ll convert it automatically.

Output

[embedcode]<a href=”//winefolly.com/wp-content/uploads/2012/12/Different-Types-of-Wine-v2.jpg”><img src=”//winefolly.com/wp-content/uploads/2012/12/Different-Types-of-Wine-v2.jpg” /></a><p>Original Source: <a href=”https://winefolly.com/review/different-types-of-wine/” title=”Different Types of Wine” rel=”dofollow”>Different Types of Wine</a></p>[/embedcode]


Pinnit

Shortcode to output a Pinterest pinnit button.

Code

[[pinnit url="" image="" description=""]]

Output

[pinnit url=”https://winefolly.com/review/piedmont-wine-guide/” image=”https://winefolly.com/wp-content/uploads/2013/12/piedmont-wine-map.png” description=”The Essential Piedmont Wine Guide”]


Google Analytics Link Tracking

Shortcode to output the necessary code to track link clicks.

Code

[[ga on="click" selector=".wb-poster-link" category="Store"
action="link-click" label="B-Poster Page Bottom Post"]]

Available attributes

on
click | hover
selector
The class or id of the link you want to track.
category
The GA tracking category
action
The GA action
label
Short description to describe the event

Note

The shortcode(s) should be added to the bottom of the post. No output will be visible.


Flex

The flex shortcode simplifies the process of using flexbox for laying out content.

Code

[flex]
<figure>
<img>
</figure>
<div>
Content goes here
</div>
[/flex]

Available attributes

vertical
“top | middle | bottom”
horizontal
“left | center | right”
spacing
“between | around”

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Practical Example

Let’s say you want to output two call-to-action buttons somewhere in a post.

Code

[flex vertical="middle" horizontal="center"]]
<a class="button button-medium button-secondary" href="#">See Past Episodes <i class="fa fa-undo"></i></a>
<a class="uk-margin-left button button-medium button-primary" href="#"><i class="fa fa-calendar"></i> See Upcoming Schedule</a>
[[/flex]

Output