Base web patterns and code for Strata 3 are detailed below.
Sliders
Slider with Banner
Banner height is dependent upon image height.
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="flexslider slider-fade s3-flex-f">
<ul class="slides">
<li><div><img src="/sites/g/files/upcbnu4656/files/brand/sliders/slider-3-1-04.jpg" alt="" class="img-responsive img-expand" /></div>
<div class="s3-absolute-full">
<div class="wrap-table">
<div class="wrap-table-inner">
<div class="col-sm-4 col-sm-offset-1">
<div class="s3-c s3-p-8">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p><a href="#">Sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/arrow/arrow-c.png" class="img-responsive hidden-xs" alt="">
</div>
</div>
</div>
</div>
</li>
<li><div><img src="/sites/g/files/upcbnu4656/files/brand/sliders/slider-3-1-05.jpg" alt="" class="img-responsive img-expand" /></div>
<div class="s3-absolute-full">
<div class="wrap-table">
<div class="wrap-table-inner">
<div class="col-sm-4 col-sm-offset-7">
<div class="s3-c s3-p-8">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p><a href="#">Sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/arrow/arrow-c.png" class="img-responsive hidden-xs" alt="">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Slider with Description Below Image
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="row">
<div class="col-xs-12">
<div class="flexslider slider-fade-full">
<ul class="slides s3-c">
<li><div><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/sliders/slider-3-1-01.jpg" alt="" class="img-responsive" /></a></div>
<div class="col-xs-12">
<div class="s3-p-8 s3-p-t0 s3-m-8 s3m-t0">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gt">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</li>
<li><div><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/sliders/slider-3-1-02.jpg" alt="" class="img-responsive" /></a></div>
<div class="col-xs-12">
<div class="s3-p-8 s3-p-t0 s3-m-8 s3m-t0">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gd">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Slider by Thirds
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="row">
<div class="col-xs-12">
<div class="flexslider slider-slide">
<ul class="slides">
<li><div class="col-sm-12">
<div class="row">
<div class="col-md-8 s3-p-0">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a>
</div>
<div class="col-md-4 s3-p-0 fixed-3-2-col-4 s3-c">
<div class="wrap-table">
<div class="wrap-table-inner s3-p-10">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gt">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</div>
</div>
</div></li>
<li><div class="col-sm-12">
<div class="row">
<div class="col-md-8 col-md-push-4 s3-p-0">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-3-2.png" alt="" class="img-responsive img-expand" /></a>
</div>
<div class="col-md-4 col-md-pull-8 s3-p-0 fixed-3-2-col-4 s3-c">
<div class="wrap-table">
<div class="wrap-table-inner s3-p-10">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gt">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</div>
</div>
</div></li>
</ul>
</div>
</div>
</div>
Slider by Halves
-
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
-
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="row">
<div class="col-xs-12">
<div class="flexslider slider-slide">
<ul class="slides">
<li class="s3-gt"><div class="col-sm-12">
<div class="row">
<div class="col-md-6 s3-p-0">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a>
</div>
<div class="col-md-6 s3-p-0 fixed-3-2-col-6 s3-c">
<div class="wrap-table">
<div class="wrap-table-inner s3-p-10">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gt">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</div>
</div>
</div></li>
<li class="s3-gd"><div class="col-sm-12">
<div class="row">
<div class="col-md-6 s3-p-0 col-md-push-6">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-3-2.png" alt="" class="img-responsive img-expand" /></a>
</div>
<div class="col-md-6 s3-p-0 col-md-pull-6 fixed-3-2-col-6 s3-c">
<div class="wrap-table">
<div class="wrap-table-inner s3-p-10">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gt">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</div>
</div>
</div></li>
</ul>
</div>
</div>
</div>
Slider Carousel with Images
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorum Ipsum Dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="row">
<div class="col-xs-12">
<div class="flexslider flexslider-carousel carousel-items">
<ul class="slides">
<li><div class="col-sm-12">
<br class="visible-xs" />
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
<li><div class="col-sm-12">
<br class="visible-xs" />
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
<li><div class="col-sm-12">
<br class="visible-xs" />
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
<li><div class="col-sm-12">
<br class="visible-xs" />
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
<li><div class="col-sm-12">
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
<li><div class="col-sm-12">
<br class="visible-xs" />
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
<li><div class="col-sm-12">
<br class="visible-xs" />
<div class="s3-m-5 s3-m-t0"><a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-3-2.png" alt="" class="img-responsive img-expand" /></a></div>
<h2 class="h5"><a href="#">Lorum Ipsum Dolor</a></h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></li>
</ul>
</div>
</div>
</div>
Features
Background Cover with Banner Block
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="s3-p-10 s3-bg-cover s3-c" style="background-image: url(/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-16-9-r-unconquered.jpg);">
<div class="row">
<div class="col-sm-5 col-sm-offset-1 col-md-4 col-md-offset-1">
<div class="s3-p-10 s3-c">
<h2 class="s3-mt-0">Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</div>
</div>
Background Cover
Image does not show at the smallest size.
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="s3-m-4 s3-p-0 s3-bg-cover" style="background-image: url(/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-16-9-r-unconquered.jpg);">
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="s3-p-10 s3-c">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-gt">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
</div>
</div>
</div>
Arrows
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="s3-m-4">
<div class="row">
<div class="col-sm-4">
<div class="s3-p-10 s3-gt feature-fixed-1">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/arrow/arrow-gt.png" class="img-responsive" alt="">
<br class="visible-xs" />
</div>
<div class="col-sm-4">
<div class="s3-p-10 s3-gt feature-fixed-1">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/arrow/arrow-gt.png" class="img-responsive" alt="">
<br class="visible-xs" />
</div>
<div class="col-sm-4">
<div class="s3-p-10 s3-gt feature-fixed-1">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/arrow/arrow-gt.png" class="img-responsive" alt="">
<br class="visible-xs" />
</div>
</div>
</div>
Points
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
Read more about Lorem Ipsum
<div class="s3-m-4">
<div class="row">
<div class="col-sm-4">
<div class="s3-p-10 s3-gt feature-fixed-1">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/point/point-gt.png" class="img-responsive" alt="">
<br class="visible-xs" />
</div>
<div class="col-sm-4">
<div class="s3-p-10 s3-gt feature-fixed-1">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/point/point-gt.png" class="img-responsive" alt="">
<br class="visible-xs" />
</div>
<div class="col-sm-4">
<div class="s3-p-10 s3-gt feature-fixed-1">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
<p><a href="#" class="btn btn-link btn-go s3-c">Read more</a><span class="sr-only"> about Lorem Ipsum</span></p>
</div>
<img src="/sites/g/files/upcbnu4656/files/brand/point/point-gt.png" class="img-responsive" alt="">
<br class="visible-xs" />
</div>
</div>
</div>
Heroes
Commoveo te a neque amet paratus.
Commoveo te a neque amet paratus.
Feugait magna singularis iustum causa neo turpis plaga genitus. Ratis a sed a. Nutus melior in duis esse probo amet importunus eros macto wisi. Eum tation ad duis aliquam verto vel. Lucidus roto praesent plaga importunus dolor vulpes importunus lucidus.
<div class="s3-hero s3-p-10 s3-c text-center">
<div class="row">
<div class="col-xs-12">
<h2>Commoveo te a neque amet paratus.</h2>
<p class="h5">Commoveo te a neque amet paratus.</p>
<p class="lead">Feugait magna singularis iustum causa neo turpis plaga genitus. Ratis a sed a. Nutus melior in duis esse probo amet importunus eros macto wisi. Eum tation ad duis aliquam verto vel. Lucidus roto praesent plaga importunus dolor vulpes importunus lucidus.</p>
</div>
</div>
</div>
2-UP
Commoveo te a
neque amet paratus.
Commoveo te a neque amet paratus.
Feugait magna singularis iustum causa neo turpis plaga genitus. Ratis a sed a. Nutus melior in duis esse probo amet importunus eros macto wisi. Eum tation ad duis aliquam verto vel. Lucidus roto praesent plaga importunus dolor vulpes importunus lucidus.
<div class="s3-p-10 s3-c">
<div class="row">
<div class="col-xs-12 col-md-6">
<h2 class="s3-mt-0">Commoveo te a <br class="visible-lg">neque amet paratus.</h2>
<p class="h5">Commoveo te a neque amet paratus.</p>
<p class="lead">Feugait magna singularis iustum causa neo turpis plaga genitus. Ratis a sed a. Nutus melior in duis esse probo amet importunus eros macto wisi. Eum tation ad duis aliquam verto vel. Lucidus roto praesent plaga importunus dolor vulpes importunus lucidus.</p>
</div>
<div class="col-xs-12 col-md-6 text-center">
<img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-pref-5-4.png" alt="" class="img-responsive s3-bs" />
</div>
</div>
</div>
Blocks
Sed dignissim lacinia
Jumentum tation imputo vulputate capio luctus occuro. Secundum proprius praesent diam jugis tation. Melior utinam paratus velit nostrud velit genitus aliquip.
Sed dignissim lacinia
Dolor nonummy nibh veniam causa quidem nulla autem quibus demoveo. Suscipit diam abbas dignissim immitto pecus singularis genitus antehabeo. Jumentum wisi cogo ullamcorper eros dolore usitas velit.
Lorem Ipsum Dolor Sit Amet
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.
<div class="s3-p-10 text-center s3-c">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h2 class="h4 text-uppercase">Sed dignissim lacinia</h2>
<p>Jumentum tation imputo vulputate capio luctus occuro. Secundum proprius praesent diam jugis tation. Melior utinam paratus velit nostrud velit genitus aliquip.</p>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="h4 text-uppercase">Sed dignissim lacinia</h2>
<p>Dolor nonummy nibh veniam causa quidem nulla autem quibus demoveo. Suscipit diam abbas dignissim immitto pecus singularis genitus antehabeo. Jumentum wisi cogo ullamcorper eros dolore usitas velit.</p>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="h4 text-uppercase">Lorem Ipsum Dolor Sit Amet</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.</p>
</div>
</div>
</div>
Center-Aligned with Icons
Sed dignissim lacinia
Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.
Nam nec ante
Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
Praesent blandit dolor
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<div class="s3-p-10 text-center s3-c">
<div class="row">
<div class="col-xs-12 col-sm-4">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-1-1.png" class="img-responsive img-pad" alt=""></a>
<h2 class="h4 text-uppercase">Sed dignissim lacinia</h2>
<p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin massa.</p>
<br class="visible-xs" />
</div>
<div class="col-xs-12 col-sm-4">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-1-1.png" class="img-responsive img-pad" alt=""></a>
<h2 class="h4 text-uppercase">Nam nec ante</h2>
<p>Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.</p>
<br class="visible-xs" />
</div>
<div class="col-xs-12 col-sm-4">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-1-1.png" class="img-responsive img-pad" alt=""></a>
<h2 class="h4 text-uppercase">Praesent blandit dolor</h2>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<br class="visible-xs" />
</div>
</div>
</div>
Center-Aligned with Images
<div class="s3-p-10 text-center s3-txt-xs-l s3-c">
<div class="row">
<div class="col-xs-12 col-sm-4">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-2-1.png" class="img-responsive" alt="">
<h2 class="h5">Sed dignissim lacinia</h2>
<p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin.</p>
</a>
</div>
<div class="col-xs-12 col-sm-4">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-2-1.png" class="img-responsive" alt="">
<h2 class="h5">Sed dignissim lacinia</h2>
<p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin.</p>
</a>
</div>
<div class="col-xs-12 col-sm-4">
<a href="#"><img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-2-1.png" class="img-responsive" alt="">
<h2 class="h5">Sed dignissim lacinia</h2>
<p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi integer lacinia sollicitudin.</p>
</a>
</div>
</div>
</div>
Left-Aligned
Sed Dignissim Lacinia
Jumentum tation imputo vulputate capio luctus occuro. Secundum proprius praesent diam jugis tation. Melior utinam paratus velit nostrud velit genitus aliquip.
Sed Dignissim Lacinia
Dolor nonummy nibh veniam causa quidem nulla autem quibus demoveo. Suscipit diam abbas dignissim immitto pecus singularis genitus antehabeo. Jumentum wisi cogo ullamcorper eros dolore usitas velit.
Sed Dignissim Lacinia
Voco regula suscipit jumentum dolore in blandit venio. Autem iusto praesent lobortis vel euismod ratis nulla indoles commoveo.
Sed Dignissim Lacinia
Jumentum tation imputo vulputate capio luctus occuro. Secundum proprius praesent diam jugis tation. Melior utinam paratus velit nostrud velit genitus aliquip.
<div class="s3-p-10 s3-txt-xs-l s3-c">
<div class="row">
<div class="col-xs-12 col-sm-3">
<h2 class="h3">Sed Dignissim Lacinia</h2>
<p>Jumentum tation imputo vulputate capio luctus occuro. Secundum proprius praesent diam jugis tation. Melior utinam paratus velit nostrud velit genitus aliquip.</p>
</div>
<div class="col-xs-12 col-sm-3">
<h2 class="h3">Sed Dignissim Lacinia</h2>
<p>Dolor nonummy nibh veniam causa quidem nulla autem quibus demoveo. Suscipit diam abbas dignissim immitto pecus singularis genitus antehabeo. Jumentum wisi cogo ullamcorper eros dolore usitas velit.</p>
</div>
<div class="col-xs-12 col-sm-3">
<h2 class="h3">Sed Dignissim Lacinia</h2>
<p>Voco regula suscipit jumentum dolore in blandit venio. Autem iusto praesent lobortis vel euismod ratis nulla indoles commoveo.</p>
</div>
<div class="col-xs-12 col-sm-3">
<h2 class="h3">Sed Dignissim Lacinia</h2>
<p>Jumentum tation imputo vulputate capio luctus occuro. Secundum proprius praesent diam jugis tation. Melior utinam paratus velit nostrud velit genitus aliquip.</p>
</div>
</div>
</div>
Left-Aligned with Images
Curabitur tortor
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae, Morbi Lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Pellentesque nibh
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor sem massa mattis sem, at interdum magna augue eget diam.
<div class="s3-p-10 s3-c">
<div class="s3-m-10">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
<div class="row">
<div class="col-xs-12 col-sm-4">
<img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-1-1.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-8">
<h2 class="h3 s3-mt-0">Curabitur tortor</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae, <a href="#">Morbi Lacinia</a> molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.</p>
</div>
</div>
</div>
<div class="clearfix visible-xs s3-m-10"></div>
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0 ranking">
<div class="row">
<div class="col-xs-12 col-sm-4">
<img src="/sites/g/files/upcbnu4656/files/brand/placeholders/ratio-1-1.png" class="img-responsive" alt="">
</div>
<div class="col-xs-12 col-sm-8">
<h2 class="h3 s3-mt-0"><a href="#">Pellentesque nibh</a></h2>
<p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor sem massa mattis sem, at <a href="#">interdum magna</a> augue eget diam.</p>
</div>
</div>
</div>
</div>
</div></div>