The goal of this style guide is to simply document the different HTML tags and classes you need to lay out your story perfectly every time.

In the HTML text editor on Word Press, you can enter the tags and classes as described below into your story. Make sure you see the window opened up to the “text” view (as seen below) and then enter the tags and paragraph elements below around your text. Any questions? Ask jason@bingewhale.com


Screen Shot 2016-04-09 at 1.01.12 PM

PRO TIP: Make sure to have your editor on “text”

Below are a list of the various style elements, with the code on exactly how it looks in the text editor. To see these styles in action, review the GIF Story “13 “GAME OF THRONES” Romances that rocked Westeros.”

LEDE

This is the Lede. It is the first paragraph of the story. If you don’t want a lede, you don’t have to use one. But some people think it rather classy.

CODE BLOCK

 <p class="lede">
This is the Lede. It is the first paragraph of the story. 
If you don't want a lede, you don't have to use one. 
But some people think it rather classy.
</p>
Warning box

Warning: This is a warning element. You can warn for spoilers or NSFW with this element

CODE BLOCK

 <p class="warning">Warning: This is a warning element. 
Warning: This is a warning element. You can warn for spoilers or 
NSFW with this element </p>
Sub-Headline

13. This is a sub-headline. You use the classic H2 tags

CODE BLOCK

 <h2> 13. This is a sub-headline. 
You use the classic H2 tags </h2>
Normal text

This is normal text. Just write it. No <P> tags
necessary. Just let ‘er rip. Nam vitae volutpat augue, nec tristique quam. Fusce ut euismod ligula. Ut sagittis, metus a viverra ullamcorper, enim felis blandit ligula, sed vulputate purus dui nec arcu.


Praesent dapibus mi sed facilisis interdum. Suspendisse potenti. Nullam vulputate ipsum at metus porttitor, a commodo sapien lobortis. Curabitur quam leo, malesuada sit amet pellentesque ac, efficitur bibendum sem. Duis vestibulum elit quis mattis mollis. Phasellus sagittis non magna laoreet dictum. Phasellus sit amet felis diam.

CODE BLOCK


This is normal text. Just write it. No <P> tags
necessary. Just let ‘er rip. Nam vitae volutpat augue, nec
tristique quam. Fusce ut euismod ligula. Ut sagittis, metus
a viverra ullamcorper, enim felis blandit ligula, sed
vulputate purus dui nec arcu.
<p>
Praesent dapibus mi sed facilisis
interdum. Suspendisse potenti. Nullam vulputate ipsum at metus
porttitor, a commodo sapien lobortis. Curabitur quam leo,
malesuada sit amet pellentesque ac, efficitur bibendum sem.
Duis vestibulum elit quis mattis mollis. Phasellus sagittis
non magna laoreet dictum. Phasellus sit amet felis diam.

Embed GIF

NOTE: You can tighten the height of the iframe to height=’290′. Currently defaults to height=’310′

This is a caption. It’s optional. There if you want to use it. Omit if you don’t.

Bold Headline for Bran using H4 tags

This led to the pushing of Bran, and the attempted knifing of Bran, which led directly to the bloody war between the Starks and Lannisters.

CODE BLOCK

<iframe id="bw-embed-frame" 
src="https://bingewhale.com/embed/game-of-thrones/season-1/episode-1/winter-is-coming/59m/43s" 
width="500" height="290" frameborder="0" scrolling="no" 
allowfullscreen="allowfullscreen"></iframe>

<p class="caption">This is a caption.
It's optional. There if you want to use it. 
Omit if you don't.</p>

<h4>Bold Headline for Bran using H4 tags</h4>

This led to the pushing of Bran, and the 
attempted knifing of Bran, which led directly 
to the bloody war between the Starks and Lannisters.
Factoid Box

PRO TIP: this is a factoid. You reference it by using class = “factoid”

CODE BLOCK

<p class="factoid">PRO TIP: this is a factoid. 
You reference it by using class = "factoid"</p>
CTA Box

This is a CTA button with class name “cta”. You can add a link and try it yourself.

CODE BLOCK

<p class="cta">This is a CTA button with 
class name "cta". You can add a 
<a href="www.bingewhale.com">link</a> 
and try it yourself.</p>

That concludes the style guide. Please email with any questions or updates.
the-end