ACCORDION
Example:
Code:
123456789101112131415161718192021222324<div class="accordion">
<ul aria-label="..." class="accordion-controls">
<li>
<button class="accordion--button" aria-controls="content-1" aria-expanded="false" id="accordion-control-1">Apples</button>
<div class="accordion--body" aria-hidden="true" id="content-1">
<p>Apples are a fine fruit often associated with good health, and fewer doctors appointments.</p>
<p>Example. An apple a day keeps the doctor away.</p>
</div>
</li>
<li>
<button class="accordion--button" aria-controls="content-2" aria-expanded="false" id="accordion-control-2">Lemons</button>
<div class="accordion--body" aria-hidden="true" id="content-2">
<p>Lemons are good with almost anything, yet are often have a negative connotation when used in conversation.</p>
<p>Example. The bread from the french bakery is normally very good, but the one we bought today was a lemon.</p>
</div>
</li>
<li>
<button class="accordion--button" aria-controls="content-3" aria-expanded="false" id="accordion-control-3">Kiwis</button>
<div class="accordion--body" aria-hidden="true" id="content-3">
<p>Kiwis are a fun, under-appreciated fruit.</p>
</div>
</li>
</ul>
</div>
ADD THIS
Example:
Share this:Code:
12345678910111213141516171819202122232425262728293031323334353637383940<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="{addThis URL here}" async="async"></script>
<div class="addthis_toolbox">
<div class="share custom_images">
<span class="label">Share this: </span>
<ul>
<li>
<a href="#" class="addthis_button_facebook">
<span class="hidden">Share on Facebook</span>
<span class="share-facebook share-sprite"></span>
</a>
</li>
<li>
<a href="#" class="addthis_button_google_plusone_share">
<span class="hidden">Share on Google Plus</span>
<span class="share-googleplus share-sprite"></span>
</a>
</li>
<li>
<a href="#" class="addthis_button_twitter">
<span class="hidden">Share on Twitter</span>
<span class="share-twitter share-sprite"></span>
</a>
</li>
<li>
<a href="#" class="addthis_button_pinterest_share">
<span class="hidden">Share on Pinterest</span>
<span class="share-pinterest share-sprite"></span>
</a>
</li>
<li>
<a href="/" class="addthis_button_linkedin">
<span class="hidden">Share on LinkedIn</span>
<span class="share-linkedin share-sprite"></span>
</a>
</li>
</ul>
</div>
</div>
BREADCRUMBS
Example:
Code:
123456<ul class="breadcrumbs">
<li class="home-crumb"><a href="/" alt="/" title="/"><span class="zmdi zmdi-home"></span><span class="screen-reader-text">Home</span></a></li>
<li><a href="/" alt="/" title="/">Router</a></li>
<li><a href="/" alt="/" title="/">Degree</a></li>
<li><a href="/" alt="/" title="/">Great Grandparent</a></li>
</ul>
LOGO GRID
Example:
Code:
12345678<ul class="logo-grid">
<li>
<a href="{url}" alt="..." title="...">
<img src="{image url}" alt="..." title="...">
</a>
</li>
...
</ul>
PROFILE
Example:
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Code:
12345678910<div class="profile">
<div class="profile-image">
<img src="{image url}">
</div>
<div class="profile-text">
<span class="name">Jane Doe</span>
<span class="title">Very Important Person (VIP)</span>
<p class="bio">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
ROUTER ROW
Example:
TITLE GOES HERE
Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Learn MoreCode:
1234567<div class="router-row">
<div class="text-container full-width">
<h3>Title Goes Here</h3>
<p>Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.</p>
<a class="more-link" href="/" alt="/" title="/">Learn More</a>
</div><!--text-container-->
</div><!--router-row-->
ROUTER ROW WITH IMAGE
Example:
Title Goes Here with Image
Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Learn MoreCode:
12345678910<div class="router-row">
<div class="image-container">
<img src="{image url}" alt="..." title="...">
</div><!--image-container-->
<div class="text-container">
<h4>Title Goes Here with Image</h4>
<p>Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.</p>
<a class="more-link" href="/" alt="/" title="/">Learn More</a>
</div><!--text-container-->
</div><!--router-row-->
TABS
Example:
Apples
Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.
Code:
12345678910111213141516171819202122<div class="tabbed-container full-body-tab">
<ul class="tabs">
<li class="tab-trigger active" rel="tab1">Tab 1</li>
<li class="tab-trigger" rel="tab2">Tab 2</li>
</ul>
<div class="tab-container">
<div id="tab1" class="tab-content">
<div class="accordion-open-default">
<div class="accordion-container">
Tab Number 1
</div><!--accordion-container-->
</div><!--accordion-open-default-->
</div><!--tab-content #tab1 -->
<div id="tab2" class="tab-content">
<div class="accordion-open-default">
<div class="accordion-container">
Tab Number 2
</div><!--accordion-container-->
</div><!--accordion-open-default-->
</div><!-- tab-content #tab2 -->
</div><!-- .tab-container -->
</div>