Base Creative Pattern Lab

Portfolio Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed cupiditate alias eum molestias explicabo non odio praesentium commodi debitis, unde vel impedit, eligendi. Quasi corporis esse velit aut, sequi rerum!

Our role

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eveniet porro, aut recusandae, earum, pariatur quis qui laborum a, perspiciatis minus nihil! Vitae reiciendis commodi quasi blanditiis perspiciatis, ab modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis repudiandae dolore, dicta eum est cupiditate commodi mollitia voluptates, ullam hic quam perspiciatis illum. Aut deleniti quasi voluptate tenetur reiciendis!

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
James Garnham, Creative Director

HTML

									
										<div class="text">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed cupiditate alias eum molestias explicabo non odio praesentium commodi debitis, unde vel impedit, eligendi. Quasi corporis esse velit aut, sequi rerum!</p>

	<h3>Our role</h3>
	<p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>. Ipsum eveniet porro, aut recusandae, earum, pariatur quis qui laborum a, perspiciatis minus nihil! Vitae reiciendis commodi quasi blanditiis perspiciatis, ab modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis repudiandae dolore, dicta eum est cupiditate commodi mollitia voluptates, ullam hic quam perspiciatis illum. Aut deleniti quasi voluptate tenetur reiciendis!</p>

	<blockquote class="quote--client">
	   	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. </p>
		<cite class="citation byline">James Garnham, <span class="quote--client__role">Creative Director</span></cite>
	</blockquote>
</div>

Portfolio List

This pattern contains: molecules-portfolio-item

HTML

									
										<div class="project-list">
</div>

Portfolio Navigation

1 / 37 projects

This pattern contains: molecules-portfolio-prevnext molecules-portfolio-nav

HTML

									
										<div class="nav--project">
	<div class="nav nav--prevnext">
		1 / 37 projects
		<ul class="nav-list">
			<li><a class="nav--prevnext__prev icon icon--leftarrow" href="#" ><span class="icon__text">Previous</span></a></li>
			<li><a class="nav--prevnext__next icon icon--rightarrow" href="#" ><span class="icon__text">Next</span></a></li>
		</ul>
	</div>	<div class="nav nav--category">
		<ul class="nav-list">
			<li><a href="#" data-filter="*">All</a></li>
			<li><a href="#" data-filter="app">Apps</a></li>
			<li><a href="#" data-filter="brand">Brands</a></li>
			<li><a href="#" data-filter="print">Print</a></li>
			<li><a href="#" data-filter="website">Websites</a></li>
		</ul>
	</div></div>

Tag List

HTML

									
										<div class="tag-list">
	<h3>Other disciplines for this client</h3>
	<div class="button">App</div>
	<div class="button">Brand</div>
	<div class="button">Website</div>
</div>