Consistency is a key part of any style guide. These templates will help guarantee consistency in content and design of our various content pages.
Criteria
The image should measure XXXX x XXX pixels.
When possible, use a quote from original Northwest Passage content.
<div class="quote">
<img src="images/face/atkins.png" alt="Owen Atkins" />
<p>Quote goes here</p>
<div class="cite">Owen Atkins<br />
<span><a href="articles/15/visualize-tacoma-the-story-of-seaweed.php">on the chances of a Seaweed reunion</a></span>
</div>
</div>Birthday list should only display birthdays of the current month.
Long-form articles are the primary format for Northwest Passage content. They can be original content or previously-published content from other outlets if posted with permission.
The following elements are required for all articles:
The headline should be the title of the article and should include keywords included in the article. This should be featured at the top of the page, and also be used in the title tag.
<h1>Deep Sixed: The Making of the First Grunge Compilation</h1>This should be the only <h1>on any given page. The headline should be no longer than X characters. Ensure that keywords are used in the headline.
The dek should summarize the article in a single paragraph. This will appear below the headline.
<p class=”dek”>Lorem ipsum</p>The dek should be no longer than X characters.
Credit for the article’s authorship should be listed here. Use Northwest Passage as default byline.
<p class=”byline”>Author Name</p>These elements can be used for article content, but are not required. However, all articles should feature some of this optional content.
When necessary, the subheader can be used to describe a subsection of an article. It is not required to use a subheader in an article; you may also break up long chunks of text with a horizontal rule or a photo.
<h2>Subheading</h2>This image only displays on medium and large screens, so do not put anything that is critical to the article. A caption can also be added, if necessary.
<div class=”pull”>
<img src=”imgsrc.jpg” alt=”description” />
<p>caption goes here</p>
</div>Full-width images are a visual way to break up text. A caption should be added when the subject of the image is not obvious.
<div class="photo">
<img src="seaweed-band.jpg" alt="Seaweed" />
<p>The final lineup.</p>
</div><blockquote class="pull hide-for-small">Quote goes here.<span>Person</span> </blockquote><blockquote class=”full”>Blockquote <span>Person, description</span> </blockquote> An info box can be used to present additional information that does not fit well within the body of the text.
<div class="pull panel">
<h3>Title of Info box</h3>
<h4>Subtitle</h4> <ul class="no-bullet">
<li>List content</li> </ul> <p>Content</p>
</div>This code will allow an embedded YouTube video to be added to a content page
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xRH6I8baK7o" frameborder="0" allowfullscreen></iframe>
</div>Lists are the secondary format for Northwest Passage content.
There are three layouts available. Based on the type of content, one of these three should be used for the list:
The URL slug is an important URL for SEO, and a good slug can positively affect our appearance in search engine results pages.
The title tag of each content item should be in this format:
[Title of content item] | Northwest Passage
Always use alt text to label images for accessibility and SEO purposes. Alt text should describe the image in the context of the page in a sentence.
Headings (H1) should be used as page titles and are required on all pages. Only one H1 heading should be used per page. Subheadings (H2, H3, etc) are used to break articles into smaller sections. Always used them in a hierarchical manner (H2 follows H1, H3 follows H2, and so forth).
Use a horizontal rule to break up long chunks of text. Always select an appropriate place to use them; they are best used to convey a stop to a particular section when subheaders are not used.
Whenever a specific reference is made to another page on the Northwest Passage site or an external site, hyperlink a small portion of the text. Include only relevant words in the hyperlink; leave off leading articles and do not include punctuation marks at the end of the sentence.
Unordered or ordered lists can be a useful way to present a set of information and can break up paragraphs when used correctly. Use ordered lists only when the order of the list items is relevant.