People
This pattern contains:
molecules-block-person
HTML
<section class="l-section">
<div class="g-row g-sm-clear-2 g-md-clear-3 g-lg-clear-4 g-xl-clear-4">
<div class="g g-sm-12 g-md-8 g-lg-6 g-xl-6">
<div class="person">
<a class="person_figure" href="#">
<img class='person_portrait' src="http://placekitten.com/g/800/600" alt="" /> </a>
<p class="person_name">
<span >Lorem ipsum</span> </p>
<p class='byline'>Lorem Ipsum dolor sit amet</p> <a href="#" class="btn btn-small">Lorem</a> </div> </div>
<div class="g g-sm-12 g-md-8 g-lg-6 g-xl-6">
<div class="person">
<a class="person_figure" href="#">
<img class='person_portrait' src="http://placekitten.com/g/800/600" alt="" /> </a>
<p class="person_name">
<span >Lorem ipsum</span> </p>
<p class='byline'>Lorem Ipsum dolor sit amet</p> <a href="#" class="btn btn-small">Lorem</a> </div> </div>
<div class="g g-sm-12 g-md-8 g-lg-6 g-xl-6">
<div class="person">
<a class="person_figure" href="#">
<img class='person_portrait' src="http://placekitten.com/g/800/600" alt="" /> </a>
<p class="person_name">
<span >Lorem ipsum</span> </p>
<p class='byline'>Lorem Ipsum dolor sit amet</p> <a href="#" class="btn btn-small">Lorem</a> </div> </div>
<div class="g g-sm-12 g-md-8 g-lg-6 g-xl-6">
<div class="person">
<a class="person_figure" href="#">
<img class='person_portrait' src="http://placekitten.com/g/800/600" alt="" /> </a>
<p class="person_name">
<span >Lorem ipsum</span> </p>
<p class='byline'>Lorem Ipsum dolor sit amet</p> <a href="#" class="btn btn-small">Lorem</a> </div> </div>
</div>
</section>
Banner
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)
Lorem ipsum
This pattern contains:
atoms-heading-1
atoms-heading-2
atoms-text-paragraph
atoms-button-alternate
atoms-button
HTML
<div class="banner" role="banner" style="background-image:url('https://www.apple.com/v/environment/e/overview/renewable_large.jpg')">
<div class="l-container">
<h1 class='banner_title'>Lorem ipsum dolor sit (37 characters)</h1> <h2 class='banner_subTitle'>Lorem ipsum dolor sit (37 characters)</h2> <p class='banner_text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p> <a href="#" class="btn">Lorem ipsum</a> </div>
</div>
Banner Empty
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)
Lorem ipsum
This pattern contains:
atoms-heading-1
atoms-heading-2
atoms-text-paragraph
atoms-button-alternate
atoms-button
HTML
<div class="banner" role="banner" >
<div class="l-container">
<h1 class='banner_title'>Lorem ipsum dolor sit (37 characters)</h1> <h2 class='banner_subTitle'>Lorem ipsum dolor sit (37 characters)</h2> <p class='banner_text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni (210 characters)</p> <a href="#" class="btn btn-alt">Lorem ipsum</a> </div>
</div>
Block Links
This pattern contains:
molecules-block-link
HTML
<div class="blockLink_wrapper g-row">
<div class="g g-sm-12 g-md-12 g-lg-8 g-xl-6">
<a class="blockLink" href="#">Lorem ipsum</a> </div>
<div class="g g-sm-12 g-md-12 g-lg-8 g-xl-6">
<a class="blockLink" href="#">Lorem ipsum</a> </div>
<div class="g g-sm-12 g-md-12 g-lg-8 g-xl-6">
<a class="blockLink" href="#">Lorem ipsum</a> </div>
</div>