H1 Heading (font: Poppins)

H1’s are only for the title of the blog post or page and aren’t used anywhere else.

Paragraph Font: Droid Serif.

H2 Heading (font: Poppins)

H2’s are for all the main topics in the post. Most headings will be H2.

H3 Heading (font: Poppins)

If there are subtopics within a topic, you could use H3 or H4. I’m open to suggestions about when to use H3.

H4 Heading (font: Poppins)

H4 is a great subheading style. I’m open to suggestions about when to use H4.

H5 Heading (font: Poppins)

For some reason I default to using H5 for bolder statements that I want more than just a bold paragraph font. Like for the words “Pro” and “Con”

H6 Heading (font: Poppins)

I don’t know when/why an H6 would be used. Perhaps when you want Poppins font as a header, but it to be basically the same size as our normal paragraph font? I’m open to suggestions.


Button Sizes

Likely most times we'll just use the base or large button size depending on the call to action.


Buttons with Icons

Icons can technically be on the right or left side but I'm pretty sure we should always put them on the left.


Fluid Buttons (Full Width)

Where the buttons take up the full width of the column.


Mini Separators

Might be helpful for subheaders

Basic Separator h5

Subheading text. Energistically benchmark focused growth strategies via superior supply chains. Compellingly reintermediate mission-critical potentialities whereas cross functional scenarios. Phosfluorescently re-engineer distributed processes without standardized supply chains.


Colored Separator h5

Subheading text. Energistically benchmark focused growth strategies via superior supply chains. Compellingly reintermediate mission-critical potentialities whereas cross functional scenarios. Phosfluorescently re-engineer distributed processes without standardized supply chains.


Blockquote

To create press the little quotation mark button which is located between the strikethrough button and the bullet button)

Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service. The iMac is not just the color or translucence or the shape of the shell. The essence of the iMac is to be the finest possible consumer computer in which each element plays together.

Steve Jobs


Pullquote

This is a blockquote with quotation marks. Add this to in the blockquote HTML:

class="pullquote"

Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service. The iMac is not just the color or translucence or the shape of the shell. The essence of the iMac is to be the finest possible consumer computer in which each element plays together.

Steve Jobs


HTML Text Elements

This is a link text Lorem Ipsum is simply dummy text of the printing and typesetting industry. This is a bold text  Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. This is an highlight text it has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. This is an italic Text it was popularised in the 1960s with the release of Letraset sheets containing 

This is a strickethrough text sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. This is an underline text nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.


Tooltips

If we want to do this, there are fancier plugins (ie, that will automatically create tooltips for certain words). The downside is the mobile experience.

To create this tooltip, you design a special <a> tag in HTML. It goes like this:

a class="btn-tooltip" title="" href="#" data-toggle="tooltip" data-placement="top" data-original-title="This is a tooltip!" data-title="">Hover this is link for tooltip</a>

Hover this is link for tooltip lorem ipsum dolor sit amet, consectetur adipiscing elit. Shendrerit. Quisque nec nisi tortor. Vivamus purus odio, mollis ut sagittis vel, feugiat et nulla. Aenean id felisol sed ligula volutpat consectetur. A second tooltip vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.


List Styles

In addition to bullets and numbered lists we can do custom icons (any font awesome icon). In general, I would probably just choose regular bullet points unless there's an opportunity to be particularly cheeky.

Pros
  • Priority 1
  • Important One Description Tiny
  • Important Two Description Tiny
  • Important Three Description Tiny
  • Important Four Description Tiny
  • Important Five Description Tiny
Cons
  1. Priority 1
  2. Important One Description Tiny
  3. Important Two Description Tiny
  4. Important Three Description Tiny
  5. Important Four Description Tiny
  6. Important Five Description Tiny

  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five
  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five
  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five
  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five

  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five
  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five
  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five
  • Priority 1
  • Important One
  • Important Two
  • Important 3
  • Important Four
  • Important Five

Counters

Could potentially make standard content blocks that include [gear type] counters / stats that we can throw into posts that have that gear type. Plus other creative ideas.
*The only downside is they would need to be manually updated.

500+

Carabiners on WeighMyRack

100+

Belay Devices

5239058

Cups of Tea to Make WMR


1000+

Ropes on WeighMyRack

191

bluesign® Certified

350

UIAA Certified Dry


500+

Carabiners on WeighMyRack

100+

Belay Devices

5239058

Cups of Tea to Make WMR


Progress Bar

Another fun (slightly animated) way to add stats perhaps.

Weight 90%
Price 20%
Strength 55%
Model Name 1 90 grams
Model Name 2 80 grams
Model Name 3 55 grams

Comparison

Model Name 1 90 grams
Model Name 2 80 grams
Model Name 3 55 grams

Comparison

Model Name 1 55 grams
Model Name A 70 grams
Model Name 2 80 grams
Model Name 3 90 grams
Model Name 4 93 grams

Pie Progress Circle

A fun (slightly animated) way to add stats perhaps.

5th Lightest

Affordability Scale

Anything

5th Lightest

A description of this strange stat perhaps.

AFFORDABILITY SCALE

What the hell is an affordability scale you say?!

5th Lightest

A description of this strange stat perhaps.


Dividers

Normal Divider

Divider In the WMR Accent Color

Custom Icon Divider

Can be any icon. The placement can be left / center / right of the divider

Divider With Link to Top of Page

I’m not sure I’m into giving the reader and excuse to get out, but I suppose it could be helpful if we’re getting particularly wordy 😉

Custom Link Divider

Kinda cool customization possibility, but doesn’t seem particularly intuitive for the user.

Countdown Timer

I doubt we'll have many uses for a countdown timer since they are timely and ideally our content is timeless. But it is a possibility, like for a product release or a sale.

000 days 00 hours 00 minutes 00 seconds

Until Alison Turns 40. Is that supposed to be a big deal?