Atlantic Code Snippets

HTML snippets for Atlantic writers

View the Project on GitHub theatlantic/html-snippets

HTML Snippet Code Library

Contents

Typography

Character HTML
Line break 
<br/>
Non-breaking space 
&nbsp;
Em dash 
&mdash;
En dash 
&ndash;
Bullet 
&bull;

Basics

Horizontal rule

<hr />

Pull quote

<aside class="pullquote">
    [QUOTE]
</aside>

Captions / Credits

Caption

<figure>
    <img src="[IMAGE URL]" alt="[IMAGE DESCRIPTION]" />
    <figcaption>CAPTION</figcaption>
</figure>

You can also float images so they don’t take up the full-width by setting the size and direction in a class.

<figure class="right one-third">
    <img src="[IMAGE URL]" alt="[IMAGE DESCRIPTION]" />
    <figcaption>CAPTION</figcaption>
</figure>

This will put the image on the right and make it up to one-third of the content well’s width.

The direction can be right or left. The size class (which sets the width) can be one-third (190px on TheAtlantic.com), two-thirds (380px), golden-ratio-big (352px) and golden-ratio-small (218px).

You’ll want to resize the image width to match these sizes manually.

Credit

Credits display slightly smaller than captions and are right-aligned

<figure>
    <img src="[IMAGE URL]" alt="[IMAGE DESCRIPTION]" />
    <figcaption class="credit">CREDITS</figcaption>
</figure>

Caption and credit

To display both a caption and a credit, use the style for captions and add the credits in parentheses after the caption text.

<figure>
    <img src="[IMAGE URL]" alt="[IMAGE DESCRIPTION]" />
    <figcaption>CAPTION (CREDIT)</figcaption>
</figure>

Caption or credit for a video

To use the caption and credit styles on videos and other embeds, use the appropriate style above and replace the <img/> tag with your embed code.

<a href="[FULL URL]" target="_blank">link text</a>

If you’re linking to a book on Amazon, we’d like to let Amazon know it is coming from us. You can set up the link to the book by putting the ISBN number in this URL and using this as the link:

http://www.amazon.com/exec/obidos/ISBN=[10 digit ISBN number]/theatla05-20/

Example:

http://www.amazon.com/exec/obidos/ISBN=0701206713/theatla05-20/

Suppress Slideshow Thumbnails

<!-- START SUPPRESS SLIDESHOW THUMBNAILS -->
<style type="text/css">
    #altGallery .galleryNav { display: none !important; }
    #altGallery .fullScreen { display: none !important; }
    #altGallery .galleryTitle { display: none !important; }
</style>
<!-- END SUPPRESS SLIDESHOW THUMBNAILS -->

Creating bookmarks within a document

Put this where you want the bookmark to be:

<a name="[bookmark_name]"></a>

Be sure to replace [bookmark_name] with whatever you want to call your bookmark. The name must be unique, consist only of alphanumeric characters (letters and numbers) and underscores.

Then to create a link to that bookmark, use this:

<a href="#[bookmark_name]">[link text, e.g., "go to section 1"]</a>

Be sure to replace [bookmark_name] with the bookmark’s name, and replace [link text] with whatever you like.

Here’s an example:

<!-- BOOKMARK -->
<a name="section_1"></a>
Section 1: De Dicto vel De Re

Lorem ipsum dolor amet sit . . .

Then somewhere else in the same document, I could link to that bookmark like this:

<a href="#section_1">Go to section 1</a>

The words “Go to section 1” will be a link, and when the user clicks it, the browser will jump back to the bookmark.

Related Content

See Also

<!-- START "SEE ALSO" v. 1 -->
<aside class="callout">
    <hr/>
    <h4>See also</h4>
    <h5>(Optional subtitle)</h5>
    <p><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></p>
    <hr/>
</aside>
<!-- END "SEE ALSO" v. 1 -->


“More on” Box

<!-- START "MORE ON" SINGLE STORY BOX v. 2 -->
<aside class="callout">
    <hr/>
    <h4>Related Story</h4>
    <div>
        <a href="[URL]">
            <img width="242" src="[THUMBNAIL URL]" />
        </a>
    </div>
    <p>
        <a href="[URL]">[ARTICLE TITLE]</a>
    </p>
    <hr/>
</aside>
<!-- END "MORE ON" SINGLE STORY BOX v. 2 -->


“More on” list box, with image

<!-- START "MORE ON" LIST BOX v. 3 -->
<!-- START "MORE ON" LIST BOX v. 3 -->
<aside class="callout">
    <hr />
    <h4>Related Stories</h4>

<div>
<figure href="[URL]"><img alt="" src="" width="242" /></figure>
</div>

<ul>
    <li><a href="[URL]">Corgis Are Great</a></li>
    <li><a href="[URL]">Corgis Are Cool</a></li>
    <li><a href="[URL]">We All Love Corgis</a></li>
</ul>

<hr /></aside>
<!-- END "MORE ON" LIST BOX v. 3 -->
<!-- END "MORE ON" LIST BOX v. 3 -->


More House of Cards

<aside class="callout">
<hr />
<h4>More House of Cards</h4>

<figure><a href="http://[example_site.com]">
    <img alt="[Site's Name]" src="" width="150" />
</a></figure>

<ul>
    <li><a href="http://example_site.com">Ep.1: Chapter 39</a></li>
    <li><a href="http://example_site.com">Ep.2: Chapter 40</a></li>
    <li><a href="http://example_site.com">Ep.3: Chapter 41</a></li>
</ul>

<hr /></aside>


Study of the Day

<!-- START "MORE STUDY OF THE DAY" BOX v. 1 -->
<aside class="callout">
  <hr/>
  <a href="http://www.theatlantic.com/health/category/studies">
    <img width="242" alt="More Studies of the Day"
         src="http://cdn.theatlantic.com/front/images/bugs/studyoftheday.png"/>
  </a>
  <ul>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
  </ul>
  <hr/>
</aside>
<!-- END "MORE STUDY OF THE DAY" BOX v. 1 -->


More Emporium

<!-- START "MORE STUDY OF THE DAY" BOX v. 1 -->
<aside class="callout">
  <hr/>
  <a href="http://www.theatlantic.com/health/category/emporium/">
    <img width="242" alt="Dr. Hamblin's Emporium of Medicinal Wonderments"
        src="http://cdn.theatlantic.com/mt/assets/food/DHEMW_bug_2.png"/>
  </a>
  <ul>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
  </ul>
  <hr/>
</aside>
<!-- END "MORE STUDY OF THE DAY" BOX v. 1 -->


<!-- START "RELATED VIDEO" SINGLE STORY BOX v. 1 -->
<aside class="callout">
    <hr/>
    <h4>Related Video</h4>
    <a class="related-video-link" href="[ARTICLE URL]">
        <img width="242" src="[THUMBNAIL URL]" />
   </a>
    <p>
        <a href="[ARTICLE URL]">[ARTICLE TITLE]</a>
    </p>
    <hr/>
</aside>
<!-- END "RELATED VIDEO" SINGLE STORY BOX v. 1 -->


Aside Image

<!-- Aside Image -->
<aside class="callout aside-image">
    <a class="aside-image-link" href="[ARTICLE URL]">
        <img width="242" src="[THUMBNAIL URL]" />
   </a>
    <p>
        <a href="[ARTICLE URL]">[ARTICLE TITLE]</a>
    </p>
</aside>
<!-- END of Aside Image -->


Multiple “More on” list with thumbnails

<!-- START MULTI-THUMB "MORE ON" WITH IMAGES v. 3 -->
<aside class="callout">
<hr />
<h4>More on Coffee</h4>

<div>
<figure href="[URL]"><img alt="" src="" width="242" /></figure>
</div>

<ul>
    <li><a href="[URL]">[TITLE]</a></li>
    <li><a href="[URL]">[TITLE]</a></li>
    <li><a href="[URL]">[TITLE]</a></li>
</ul>

<hr /></aside>
<!-- END MULTI-THUMB "MORE ON" WITH IMAGES v. 3 -->

Notes

<!-- Read "Follow-up Notes" -->
<aside class="callout callout-notes">
<hr />
<h4>Read Follow-Up <a href="http://www.theatlantic.com/notes/">Notes</a></h4>
<ul>
    <li><a href="[NOTE URL]">[NOTE TITLE]</a></li>
    <li><a href="[NOTE URL]">[NOTE TITLE]</a></li>
</ul>

<hr /></aside>
</aside>
<!-- END "Follow-up Notes" -->

More From Partners

These are modules that appear on the left-hand side of stories reposted from partner sites.

More from Our Partner Sites (Custom)

Copy the code below, edit the link, and place the link to your image inside src = “”

<!-- START "MORE FROM" Custom -->
<aside class="partner-box">
<hr />
<h4>More From Our Partners</h4>

<figure><a href="http://[example_site.com]">
    <img alt="[Site's Name]" src="" width="150" />
</a></figure>

<ul>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
    <li><a href="[ARTICLE URL]">[ARTICLE TITLE]</a></li>
</ul>

<hr /></aside>

<!-- END "MORE FROM" Custom -->

Video

From the CMS

You can find this code with the embed button on video channel pages.

<iframe width="640" height="360" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" 
    allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" 
    src="http://www.theatlantic.com/video/iframe/[VIDEOARTICLE_ID]/"></iframe>

From Brightcove

Videos that don’t live in Waldo/Ollie can be included if you have their Brightcove ID.

<iframe width="640" height="360" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" 
    allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" 
    src="http://www.theatlantic.com/video/embed/?brightcove_id=[BRIGHTCOVE_ID]"></iframe>

Optional: You can add &player=[playername] to the end of the src to control which kind of player is served. This is mainly to separate advertising and analytics - you usually don’t need it. The players are:

<iframe width="640" height="360" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" 
    allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" 
    src="http://www.theatlantic.com/video/embed/?brightcove_id=[BRIGHTCOVE_ID]&player=[PLAYER]"></iframe>

Full Width Video

Like images, wrap them in a full-width figure.

<figure class="full-width">
    <iframe width="640" height="360" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" 
        allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" 
        src="..."></iframe>
</figure>