A Pattern Apart

A List Apart's pattern library

Swatches

  • Text: #222

  • Link: #2455c3

  • Accent: #bb3825

  • Accent 2: #acba3c

  • Fill: #f0f0f0

Typography

  • Body text: Georgia Pro · View at Webtype
  • Body text: Georgia Pro Italic
  • Bold body text: Georgia Pro Semibold
  • Condensed body for mobile: Georgia Pro Condensed
  • Sans-serif: Franklin ITC Pro · View at Webtype
  • Sans-serif Bold: Franklin ITC Pro Bold
ala-slug # <aside class="ala-slug">A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Explore our <a href="/articles">articles</a> or find out more <a href="/about">about us</a>.</aside> 
Usage:
alpha-target # <ol id="alpha-target" class="secondary-nav compressed alpha-container"> <li data-letter="a"><a href="/author/lealea">Lea Alcantara</a></li> <li data-letter="a"><a href="/author/deanallen"> Dean Allen</a></li> <li data-letter="a"><a href="/author/johnallsopp"> John Allsopp</a></li> <li data-letter="a"><a href="/author/päralmqvist">Pär Almqvist</a></li> <li data-letter="a"><a href="/author/brianalvey"> Brian Alvey</a></li> <li data-letter="a"><a href="/author/stephenanderson">Stephen P. Anderson</a></li> <li data-letter="a"><a href="/author/rachelandrew">Rachel Andrew</a></li> <li data-letter="a"><a href="/author/Jake Archibald">Jake Archibald</a></li> <li data-letter="a"><a href="/author/chrisarmstrong">Chris Armstrong</a></li> <li data-letter="a"><a href="/author/lancearthur"> Lance Arthur</a></li> <li data-letter="a"><a href="/author/farukates">Faruk Ateş</a></li> </ol> 
Usage:
  1. Lea Alcantara
  2. Dean Allen
  3. John Allsopp
  4. Pär Almqvist
  5. Brian Alvey
  6. Stephen P. Anderson
  7. Rachel Andrew
  8. Jake Archibald
  9. Chris Armstrong
  10. Lance Arthur
  11. Faruk Ateş
alphabits # <nav id="alphabits" class="alphabits"> <ol> <li><a data-alphabit="a">a</a></li> <li><a data-alphabit="b">b</a></li> <li><a data-alphabit="c">c</a></li> <li><a data-alphabit="d">d</a></li> <li><a data-alphabit="e">e</a></li> <li><a data-alphabit="f">f</a></li> <li><a data-alphabit="g">g</a></li> <li><a data-alphabit="h">h</a></li> <li><a data-alphabit="i">i</a></li> <li><a data-alphabit="j">j</a></li> <li><a data-alphabit="k">k</a></li> <li><a data-alphabit="l">l</a></li> <li><a data-alphabit="m">m</a></li> <li><a data-alphabit="n">n</a></li> <li><a data-alphabit="o">o</a></li> <li><a data-alphabit="p">p</a></li> <li><a data-alphabit="q">q</a></li> <li><a data-alphabit="r">r</a></li> <li><a data-alphabit="s">s</a></li> <li><a data-alphabit="t">t</a></li> <li><a data-alphabit="u">u</a></li> <li><a data-alphabit="v">v</a></li> <li><a data-alphabit="w">w</a></li> <li><a data-alphabit="x">x</a></li> <li><a data-alphabit="y">y</a></li> <li><a data-alphabit="z">z</a></li> </ol> <a id="previous-letters" class="arrow left">◀</a> <a id="next-letters" class="arrow right">▶</a> </nav> 
Usage:
article-figure # <!-- article wrapper: --> <article class="article-layout hentry"> <div class="main-content"> <!-- the markup: --> <figure> <img src="http://d.alistapart.com/386/surveying_the_big_screen/img/screen_juliana.jpg" alt="Juliana Bicycles"> <figcaption>Juliana Bicycles treats content chunks more visually.</figcaption> </figure> </div> </article> 
Usage:
Juliana Bicycles
Juliana Bicycles treats content chunks more visually.
article-h2 # <!-- article wrapper: --> <article class="article-layout hentry"> <div class="main-content"> <!-- the markup: --> <h2 id="section4">Tiling modular content</h2> </div> </article> 
Usage:

Tiling modular content

article-h3 # <!-- article wrapper: --> <article class="article-layout hentry"> <div class="main-content"> <!-- the markup: --> <h3 id="section1">But writing <em>sucks</em>.</h3> </div> </article> 
Usage:

But writing sucks.

article-sidebar # <!-- article wrapper: --> <article class="article-layout hentry"> <div class="main-content"> <!-- the markup: --> <aside class="sidebar"> <h1>Also in Issue № 386</h1> <h2><a href="/article/offline-first">Designing Offline-First Web Apps</a></h2> <p>by Alex Feyerke</p> </aside> </div> </article> 
Usage:
basic-title # <h1 class="basic-title">Topics</h1> 
Usage:

Topics

blog-summary-link-post # <article class="blog-summary link-post"> <h1><a href="https://etherpad.mozilla.org/ep/pad/view/ro.gtMA3Rr4lYIam9OU/latest">The `picture` Element on Mozilla’s 2014 Roadmap</a></h1> <p>The <code>picture</code> proposal is <a href="http://filamentgroup.com/lab/ricg_update/">back with a vengeance</a>—boasting new improvements for web developers and browser developers alike—and Mozilla is officially on board. The <code>picture</code> element is now on the Mozilla DOM Team’s roadmap for 2014.</p> <footer class="byline"> <a href="https://etherpad.mozilla.org/ep/pad/view/ro.gtMA3Rr4lYIam9OU/latest">https://etherpad.mozilla.org</a> </footer> </article> 
Usage:
blog-summary-native # <article class="blog-summary native-post"> <h1><a href="/blog/post/css-regions-considered-harmful">CSS Regions Considered Harmful</a></h1> <footer class="byline"> by <a class="aside-author" href="/author/håkonwiumlie">Håkon Wium Lie</a> <time class="pubdate updated" datetime="2014-01-22T12:02:48-05:00">January 22, 2014</time> · <a class="comment-count" href="/blog/post/css-regions-considered-harmful#comments">23 Comments</a> </footer> <p>Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. His last article in this magazine led directly to real fonts on the web. When Håkon speaks, whether we always agree or not, we listen. In today’s post, Håkon shares his opinion on CSS Regions. </p> </article> 
Usage:

CSS Regions Considered Harmful

Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. His last article in this magazine led directly to real fonts on the web. When Håkon speaks, whether we always agree or not, we listen. In today’s post, Håkon shares his opinion on CSS Regions.

classy # <h1 class="classy">No Comments (yet)</h1> 
Usage:

No Comments (yet)

code-block # <pre class=" language-css" id="snippet1"> <code class=" language-css">html { font-size: 10px; } p { font-size: 1.4em; }</code> </pre> 
Usage: 
html { font-size: 10px; }
p { font-size: 1.4em; }
code # <p>You’re not limited to using it only on <code>width</code>; you can use it anywhere length values are permitted—and if you want to go really deep down the rabbit hole, you can also use <code>calc()</code> inside <code>calc()</code>.</p> 
Usage:

You’re not limited to using it only on width; you can use it anywhere length values are permitted—and if you want to go really deep down the rabbit hole, you can also use calc() inside calc().

comment # <ol class="article-comments" id="comments-parent" data-xid="2428459e1e1949d255759a592b479ece7fcfe534"> <li id="336130" data-count="1" class="comment member_132058"> <img src="http://d.alistapart.com/_made/pix/authors/avatars/social_login/twitter_60_60_c1.png" class="commenter-avatar" alt="" width="60" height="60"> <p class="comment-byline"> <span class="commenter-name"> <a href="http://t.co/iWhlal4gRh">James Young</a> </span> <time datetime=""><a href="/comments/a-list-together#336130">9:08 am on January 14, 2014</a></time> </p> <div class="comment-body"> <p>Great idea.</p> </div> <div class="comment-tools"> <a href="#" class="embed-link">Embed</a> </div> <div class="embed-comment"> Copy &amp; paste the code below to embed this comment. <textarea class="embed-code">&lt;figure class="embedded-quote" id="ala-embedded-comment-336130"&gt;&lt;blockquote&gt; &lt;p&gt;Great idea.&lt;/p&gt;&lt;/blockquote&gt;&lt;figcaption&gt;— James Young on &lt;a href="http://alistapart.com/comments/a-list-together#336130"&gt;A List Together&lt;/a&gt;&lt;/figcaption&gt;&lt;/figure&gt; &lt;script async data-comment="336130" charset="utf-8" src="http://d.alistapart.com/_repo/site_assets/js/comment-embed.min.js"&gt;&lt;/script&gt;</textarea> <div class="button-holder"> <input type="submit" name="cancel" value="Close" class="cancel-embed"> </div> </div> </li> </ol> 
Usage:

  1. James Young

    Great idea.

    Embed
    Copy & paste the code below to embed this comment.
commenter-signin # <ol class="article-comments" id="comments-parent" data-xid="2428459e1e1949d255759a592b479ece7fcfe534"> <li id="commenter-signin" class="commenter-signin "> <h3>Got Something to Say?</h3> <p>Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.</p> <!-- I don't know why, but I had to move the login form above the login options so that EE would generate the current_url correctly. --> <form id="sign-in-form" method="post" action="http://alistapart.com/"> <div class="hiddenFields"> <input type="hidden" name="XID" value="5896132d9890586697f3502d327fcd34c547ddc0"> <input type="hidden" name="ACT" value="9"> <input type="hidden" name="RET" value="http://alistapart.com/comments/embed-comments/a-list-together/login-return"> <input type="hidden" name="site_id" value="1"> </div> <label for="login-name-here"> Username <small>(<a id="show-registration-form" href="/utilities/register">need an account?</a>)</small> <input id="login-name-here" name="username" type="text" required="required"> </label> <label for="login_password"> Password <small>(<a id="show-forgot-password-form" href="/utilities/forgot-password">forgotten it?</a>)</small> <input id="login_password" name="password" type="password" required="required"> </label> <input type="submit" value="Submit"> <p class="never-mind">(<a id="cancel-login" href="http://alistapart.com/comments/embed-comments/a-list-together/login-return">never mind</a>)</p> </form> <div id="login-buttons" class="active"> <h4>Sign in with:</h4> <ul class="login-buttons"> <li class="twitter"><a href="http://alistapart.com/?ACT=59&amp;provider=twitter&amp;RET=http://alistapart.com/comments/embed-comments/a-list-together/login-return">Twitter</a></li><!-- --><li class="facebook"><a href="http://alistapart.com/?ACT=59&amp;provider=facebook&amp;RET=http://alistapart.com/comments/embed-comments/a-list-together/login-return">Facebook</a></li><!-- --><li class="ala"><a id="show-native-login" href="/login">A List Apart</a></li> </ul> </div> <form id="forgot_password_form" method="post" action="http://alistapart.com/"> <div class="hiddenFields"> <input type="hidden" name="XID" value="76ccc70541379a43724f77192d7666a2a2745da1"> <input type="hidden" name="ACT" value="25"> <input type="hidden" name="RET" value=""> <input type="hidden" name="params_id" value="PUsaOMvJNQHrnAZXjypxEGoIk"> <input type="hidden" name="site_id" value="1"> </div> <h4>We can reset that for you:</h4> <label for="reset-email-here"> Your email address <input id="reset-email-here" type="email" name="email"> </label> <input type="submit" value="Reset Password"> <p class="never-mind">(<a id="cancel-password-reset" href="M600o93H7pQ09L8X1t49cHY01Z5j4TT91fGfr/login-return">never mind</a>)</p> </form> <form class="sign-in-form" id="register-form" method="post" action="http://alistapart.com/"> <div class="hiddenFields"> <input type="hidden" name="XID" value="fb217a25e24c21092cee390924205badff09bf36"> <input type="hidden" name="ACT" value="23"> <input type="hidden" name="RET" value="http://alistapart.com/comments/embed-comments/a-list-together/login-return"> <input type="hidden" name="params_id" value="MktzuQBwLlUPCEEUtgGhnYqOH"> <input type="hidden" name="site_id" value="1"> </div> <h4>Create an account:</h4> <label for="new-username-here"> New username <input id="new-username-here" type="text" name="username" placeholder="jsmith" required="required"> </label> <label for="new-screen-name"> New screen name <input id="new-screen-name" name="screen_name" type="text" placeholder="Jane Smith" required="required"> </label> <label for="new-email-here"> New email address <input id="new-email-here" type="email" name="email" placeholder="you@yours.com" required="required"> </label> <label for="new-password-here"> New password <input id="new-password-here" type="password" name="password" required="required"> </label> <label for="new-password-confirm-here"> Confirm new password <input id="new-password-confirm-here" type="password" name="password_confirm" required="required"> </label> <input type="submit" value="Submit"> <p class="never-mind">(<a id="cancel-registration" href="M600o93H7pQ09L8X1t49cHY01Z5j4TT91fGfr/login-return">never mind</a>)</p> </form> </li> </ol> 
Usage:
content-minutiae # <aside class="content-minutiae"> <h1 class="share-tools">Share This:</h1> <ul class="share-tools"> <li><a href="http://twitter.com/intent/tweet?url=http://alistapart.com/blog/post/css-regions-considered-harmful&amp;text=CSS+Regions+Considered+Harmful&amp;via=alistapart">Twitter</a></li> <li><a href="http://www.facebook.com/sharer.php?u=http://alistapart.com/blog/post/css-regions-considered-harmful&amp;t=CSS+Regions+Considered+Harmful">Facebook</a></li> <li><a href="https://plus.google.com/share?url=http://alistapart.com/blog/post/css-regions-considered-harmful">Google+</a></li> </ul> </aside> 
Usage:
deadly-subtitle # <h1 class="deadly-subtitle">For people who make websites.</h1> 
Usage:

For people who make websites.

em # <em>Emphasised text</em> 
Usage:
Emphasised text
entry-footer-multi-author # <footer class="entry-footer"> <h1>About the Authors</h1> <div class="byline author vcard"> <a class="photo" href="/author/shorton"><img src="http://d.alistapart.com/_made/pix/authors/uploads/photo_133157_120_120_c1.jpg" alt=""></a> <h2><a class="fn" href="/author/shorton">Sarah Horton</a></h2> <div class="author-bio"><p>Sarah Horton is interested in exploring ways to improve quality of life through good design. As director of accessible user experience and design for the <a href="http://www.paciellogroup.com">The Paciello Group</a> (TPG), she works with companies and product teams to create “born accessible” digital products and services that work well for everyone. She is co-author of <i><a href="http://rosenfeldmedia.com/books/a-web-for-everyone/">A Web for Everyone</a></i> with <a href="http://alistapart.com/author/whitneyq">Whitney Quesenbery</a> and <i><a href="http://www.webstyleguide.com">Web Style Guide</a></i> with <a href="http://alistapart.com/author/plynch">Patrick Lynch</a>.</p></div> </div> <div class="byline author vcard"> <a class="photo" href="/author/whitneyq"><img src="http://d.alistapart.com/_made/pix/authors/uploads/photo_125000_120_120_c1.jpg" alt=""></a> <h2><a class="fn" href="/author/whitneyq">Whitney Quesenbery</a></h2> <div class="author-bio"><p>Whitney Quesenbery combines a fascination with people and an obsession to communicate clearly with her goal of bringing user research insights to designing products where people matter. She’s also passionate about civic design. As co-director of the non-profit <a href="http://centerforcivicdesign.org/">Center for Civic Design</a> with Dana Chisnell, she works with election officials on usability and design of election materials. She is co-author of <i><a href="http://rosenfeldmedia.com/books/a-web-for-everyone/">A Web for Everyone</a></i> with <a href="http://alistapart.com/author/shorton">Sarah Horton</a>, <i>Storytelling for User Experience</i> with Kevin Brooks, and <i>Global UX</i> with Daniel Szuc.</p></div> </div> </footer> 
Usage:

About the Authors

Sarah Horton

Sarah Horton is interested in exploring ways to improve quality of life through good design. As director of accessible user experience and design for the The Paciello Group (TPG), she works with companies and product teams to create “born accessible” digital products and services that work well for everyone. She is co-author of A Web for Everyone with Whitney Quesenbery and Web Style Guide with Patrick Lynch.

Whitney Quesenbery

Whitney Quesenbery combines a fascination with people and an obsession to communicate clearly with her goal of bringing user research insights to designing products where people matter. She’s also passionate about civic design. As co-director of the non-profit Center for Civic Design with Dana Chisnell, she works with election officials on usability and design of election materials. She is co-author of A Web for Everyone with Sarah Horton, Storytelling for User Experience with Kevin Brooks, and Global UX with Daniel Szuc.

entry-footer # <footer class="entry-footer"> <h1>About the Author</h1> <div class="byline author vcard"> <a class="photo" href="/author/mikepick"><img src="http://d.alistapart.com/_made/pix/authors/uploads/photo_128813_120_120_c1.jpg" alt=""></a> <h2><a class="fn" href="/author/mikepick">Mike Pick</a></h2> <div class="author-bio"> <p>As a part of <a href="http://monkeydo.biz">Monkey Do</a>, Mike approaches web design from the perspective of both art director and front-end developer. He primarily creates clean and concise design systems for websites, but is also known to get his hands dirty with HTML/CSS and JavaScript development.</p> <p>Over the years he has worked as a cog in a large agency, an in-house art director, and a humble freelancer, and has picked up a few awards along the way. He holds a BD in Communication Design from NSCAD in Halifax, Nova Scotia.</p> </div> </div> </footer> 
Usage:

About the Author

Mike Pick

As a part of Monkey Do, Mike approaches web design from the perspective of both art director and front-end developer. He primarily creates clean and concise design systems for websites, but is also known to get his hands dirty with HTML/CSS and JavaScript development.

Over the years he has worked as a cog in a large agency, an in-house art director, and a humble freelancer, and has picked up a few awards along the way. He holds a BD in Communication Design from NSCAD in Halifax, Nova Scotia.

entry-header # <header class="entry-header"> <figure class="wide-hero" data-picture="" data-alt=""> <img alt="" src="http://d.alistapart.com/_made/d/ALA386_bigscreen_300_960_483_60.jpg"> <div data-src="http://d.alistapart.com/_made/d/ALA386_bigscreen_300_480_242_60.jpg"></div> <div data-src="http://d.alistapart.com/_made/d/ALA386_bigscreen_300_960_483_60.jpg" data-media="(min-width: 600px)"></div> <div data-src="http://d.alistapart.com/_made/d/ALA386_bigscreen_300_1920_966_10.jpg" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript>&lt;img src="http://d.alistapart.com/_made/d/ALA386_bigscreen_300_960_483_10.jpg" alt=""&gt;</noscript> <a href="/issue/386" class="issue-number"><span>Issue №</span> 386</a> </figure> <h1 class="entry-title">Surveying the Big Screen</h1> <p class="entry-details"> by <a class="author" href="/author/mikepick">Mike Pick</a> <time class="pubdate updated" datetime="2013-12-04T08:00:29-05:00">December 04, 2013</time> <span class="optional-break"> Published in <a href="/topic/layout-grids">Layout &amp; Grids</a>, <a href="/topic/mobile-multidevice">Mobile/Multidevice</a>, <a href="/topic/responsive-design">Responsive Design</a> ∙ <a class="comment-count" href="#comments">21 Comments</a> </span> </p> </header> 
Usage:
Issue № 386

Surveying the Big Screen

by Mike Pick Published in Layout & Grids, Mobile/Multidevice, Responsive Design ∙ 21 Comments

figure-code # <figure class="code" id="figure1"> <pre><code class="language-markup">&lt;label for="firstname">First name:&lt;/label> &lt;input type="text" id="firstname" /> &lt;label for="lastname">Last name:&lt;/label> &lt;input type="text" id="lastname" /></code></pre> <figcaption><b>Figure 5.1:</b> Labels are visually associated by proximity with text input fields. In code, labels are programmatically connected using the <code>&lt;label&gt;</code> element, the <code>“for”</code> attribute, and the input field’s <code>“id”</code> attribute making the connection.</figcaption> </figure> 
Usage: 
<label for="firstname">First name:</label>
            <input type="text" id="firstname" />
            <label for="lastname">Last name:</label>
            <input type="text" id="lastname" />
Figure 5.1: Labels are visually associated by proximity with text input fields. In code, labels are programmatically connected using the <label> element, the “for” attribute, and the input field’s “id” attribute making the connection.
figure-full-width # <figure class="full-width"> <p data-height="388" data-theme-id="0" data-slug-hash="BJrpg" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/valhead/pen/BJrpg'>Show/hide example</a> by Val Head (<a href='http://codepen.io/valhead'>@valhead</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script> <figcaption>A full-width figure with an embedded pen from CodePen.</figcaption> </figure> 
Usage:

See the Pen Show/hide example by Val Head (@valhead) on CodePen.

A full-width figure with an embedded pen from CodePen.
figure-image # <figure id="figure4"> <img src="http://d.alistapart.com/389_fig55.png" alt="Figure 5.5: Drag-and-drop bookmarking tool requires a mouse"> <figcaption><b>Figure 5.5</b>: This feature, collecting bookmarks for related items, requires a mouse to drag and drop items into the list. A simple Add button would make this more accessible.</figcaption> </figure> 
Usage:
Figure 5.5: Drag-and-drop bookmarking tool requires a mouse
Figure 5.5: This feature, collecting bookmarks for related items, requires a mouse to drag and drop items into the list. A simple Add button would make this more accessible.
figure-quote # <figure class="quote" id="figure6"> <blockquote> <p><b>User:</b> I’d like to place an order. Here’s all my information.</p> <p><b>Your site:</b> Thanks. Got it. We’ll send this to you within three days.</p> </blockquote> </figure> 
Usage:

User: I’d like to place an order. Here’s all my information.

Your site: Thanks. Got it. We’ll send this to you within three days.

h1 # <h1>Heading One</h1> 
Usage:

Heading One

h2 # <h2>Heading Two</h2> 
Usage:

Heading Two

h3 # <h3>Heading Three</h3> 
Usage:

Heading Three

h4 # <h4>Heading Four</h4> 
Usage:

Heading Four

h5 # <h5>Heading Five</h5> 
Usage:
Heading Five
h6 # <h6>Heading Six</h6> 
Usage:
Heading Six
inline-items # <ul class="inline-items"> <li><a href="/about">About</a></li> <li><a href="/authors">Authors</a></li> <li><a href="/about/masthead">Masthead</a></li> <li><a href="/about/style-guide">Style Guide</a></li> <li><a href="/contact">Contact</a></li> <li><a href="/about/sponsor">Sponsorships</a></li> <li class="head-east-young-man"> Follow us: <a href="/about/rss">RSS</a> · <a href="http://www.facebook.com/alistapart">Facebook</a> · <a href="http://www.twitter.com/alistapart">Twitter</a> </li> </ul> 
Usage:
item-summary # <article class="item-summary article"> <span class="column-name">Rachel Andrew <i>on</i> the Business of Web Dev</span> <h1><a href="/column/your-side-project-as-insurance-policy">Your Side Project as Insurance Policy</a></h1> <img src="http://d.alistapart.com/_made/pix/authors/uploads/photo_131322_60_60_c1.jpg" alt=""> <p>You’re never too young and healthy to make sure you can keep income coming in if sudden misfortune strikes. Often our livelihood depends on our physical abilities—such as typing code. Having a product as a side project can offer security if your daily work is disrupted by illness or injury.</p> <footer class="byline"> <time class="pubdate updated" datetime="2014-01-02T08:00:37-05:00">January 02, 2014</time> </footer> </article> 
Usage:
Rachel Andrew on the Business of Web Dev

Your Side Project as Insurance Policy

You’re never too young and healthy to make sure you can keep income coming in if sudden misfortune strikes. Often our livelihood depends on our physical abilities—such as typing code. Having a product as a side project can offer security if your daily work is disrupted by illness or injury.

job-board # <aside class="job-board"> <h4>Job Board</h4> <script src="https://weworkremotely.com/jobs/random.js"></script> <div class="job"> <a href="https://weworkremotely.com/jobs/314">Boyd, Caton and Grant Transportation Group, Inc. is looking for a Web Application Developer.</a> </div> <p class="board-link">Job listings via <a href="https://weworkremotely.com/?source=ala">We Work Remotely</a></p> </aside> 
Usage:
list-unordered # <ul> <li>Offers a clear argument, not just a list of tips and tricks.</li> <li>Has a voice. Be bold, interesting, and human.</li> <li>Is written for an audience of designers, developers, content strategists, information architects, or similar.</li> <li>Is supported with convincing arguments, not just opinions. Fact-check, and cite sources where appropriate.</li> <li>Follows our <a href="/about/style-guide">style guide</a>.</li> </ul> 
Usage:
  • Offers a clear argument, not just a list of tips and tricks.
  • Has a voice. Be bold, interesting, and human.
  • Is written for an audience of designers, developers, content strategists, information architects, or similar.
  • Is supported with convincing arguments, not just opinions. Fact-check, and cite sources where appropriate.
  • Follows our style guide.
masthead-list # <article class="main-content"> <h1 class="basic-title">A Crew Apart</h1> <ul class="masthead-list"> <li class="el-jefe"> <a href="/author/zeldman">L. Jeffrey Zeldman</a> <span class="title">Founder &amp; publisher, executive creative director</span> </li> <li> <a href="/author/sboettcher">Sara Wachter-Boettcher</a> <span class="title">Editor-in-chief</span> </li> <li> <a href="/author/murtaugh">Tim Murtaugh</a> <span class="title">Technical director</span> </li> <li> <a href="http://twitter.com/mikepick">Mike Pick</a> <span class="title">Creative director, designer</span> </li> <li> <a href="/author/roseweisburd">Rose Weisburd</a> <span class="title">Columns editor</span> </li> <li> <a href="https://twitter.com/draftwerk">Sally Kerrigan</a> <span class="title">Associate editor</span> </li> <li> <a href="https://twitter.com/tinochop">Tina Lee</a> <span class="title">Developmental editor</span> </li> <li> <a href="/author/mconnelly">Marie Connelly</a> <span class="title">Blog editor</span> </li> <li> <a href="/author/kcornell">Kevin Cornell</a> <span class="title">Illustrator</span> </li> <li> <a href="/author/elynch">Erin Lynch</a> <span class="title">Production manager</span> </li> <li> <a href="/author/emeyer">Eric A. Meyer</a> <span class="title">Semantician, statistician</span> </li> <li> <a href="/author/andrewkirkpatrick">Andrew Kirkpatrick</a> <span class="title">Technical editor (accessibility)</span> </li> <li> <a href="/author/emarcotte">Ethan Marcotte</a> <span class="title">Technical editor</span> </li> <li> <a href="/author/matmarquis">Mat “Thundersnow” Marquis</a> <span class="title">Technical editor</span> </li> <li> <a href="/author/annadebenham">Anna Debenham</a> <span class="title">Technical editor</span> </li> <li> <b>Acquisitions</b> <span class="title"><a href="/author/garann">Garann Means</a>, <a href="https://twitter.com/yeseniaa">Yesenia Perez-Cruz</a>, <a href="https://twitter.com/ttimsmith">Tim Smith</a></span> </li> <li> <b>Columnists</b> <span class="title"><a href="/author/rachelandrew">Rachel Andrew</a>, <a href="/author/cbowles">Cennydd Bowles</a>, <a href="/author/lgardner">Lyza Danger Gardner</a>, <a href="/author/mattgriffin">Matt Griffin</a>, <a href="/author/laurakalbag">Laura Kalbag</a>, <a href="/author/rainypixels">Nishant Kothary</a>, <a href="/author/kmcgrane">Karen McGrane</a>, <a href="/author/NickSherman">Nick Sherman</a>, <a href="/author/dsleight">David Sleight</a>, <a href="/author/thew3c">the W3C</a></span> </li> </ul> </article> 
Usage:

A Crew Apart

promo-holder # <aside class="promo-holder"> <ul class="partner-promos"> <li> <a href="http://abookapart.com"> <img src="//d.alistapart.com/_repo/site_assets/img/promo_aba.png" alt=""> <h1>A Book Apart</h1> <p>Mobile First &amp; Responsive Web Design bundle.</p> <p>Buy both and save!</p> <p class="arrow">Order now</p> </a> </li><!-- --><li> <a href="http://aneventapart.com"> <img src="//d.alistapart.com/_repo/site_assets/img/promo_aea.png" alt=""> <h1>An Event Apart</h1> <p>Three days of design, code, and content for people who make websites.</p> <p class="arrow">See the 2014 schedule</p> </a> </li> </ul> </aside> 
Usage:
secondary-nav # <ul class="secondary-nav"> <li><a href="/about">About</a></li> <li><a href="/authors">Authors</a></li> <li><a href="/about/masthead">Masthead</a></li> <li><a href="/about/contribute">Contribute</a></li> <li><a href="/about/style-guide">Style Guide</a></li> <li><a href="/contact">Contact</a></li> <li><a href="/about/copyright">Permissions &amp; Copyright</a></li> <li><a href="/about/sponsor">RSS Sponsorships</a></li> </ul> 
Usage:
topic # <article class="item-summary topic"> <figure><a href="/topics/code"><img src="http://alistapart.com/d/topic-illustrations/code.jpg" alt=""></a></figure> <h1><a href="/topics/code">Code</a> <!--(5&nbsp;articles)--></h1> <p>Front and back end development for the web, mainly using open web standards. Markup, style, scripting, and server-side techniques and technologies. Cross-browser HTML, CSS, and JavaScript. Frameworks and preprocessors. Creating websites and applications. Optimization and performance. Hacks and workarounds.</p> <h2>Includes</h2> <ul> <li> <a href="/topic/application-development"> Application Development <span>14</span> </a> </li> <li> <a href="/topic/browsers"> Browsers <span>84</span> </a> </li> <li> <a href="/topic/css"> CSS <span>125</span> </a> </li> <li> <a href="/topic/html"> HTML <span>141</span> </a> </li> <li> <a href="/topic/javascript"> JavaScript <span>89</span> </a> </li> <li> <a href="/topic/the-server-side"> The Server Side <span>30</span> </a> </li> </ul> </article> 
Usage:
wide-hero # <figure class="wide-hero" data-picture="" data-alt=""><img alt="" src="http://d.alistapart.com/_made/d/ALA388_alisttogether_300_960_432_60.jpg"> <div data-src="http://d.alistapart.com/_made/d/ALA388_alisttogether_300_480_216_60.jpg"></div> <div data-src="http://d.alistapart.com/_made/d/ALA388_alisttogether_300_960_432_60.jpg" data-media="(min-width: 600px)"></div> <div data-src="http://d.alistapart.com/_made/d/ALA388_alisttogether_300_1920_863_10.jpg" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript>&lt;img src="http://d.alistapart.com/_made/d/ALA388_alisttogether_300_960_432_10.jpg" alt=""&gt;</noscript> <a class="issue-number" href="/issue/388"><span>Issue №</span> 388</a> </figure> 
Usage:
Issue № 388