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
- Priority 1
- Important One Description Tiny
- Important Two Description Tiny
- Important Three Description Tiny
- Important Four Description Tiny
- 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.
Comparison
Comparison
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
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?