Content Containers
Article Summary
Article Summaries extend the Bootstrap Card Component and are intended to be used whenever you want to provide a brief preview of an article (e.g. the Home Page, the Blog Archive, etc.)
<div class="article-preview card">
<a href="#">
<img src="/assets/img/blog.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<h6 class="card-title">Title of the Article</h6>
<span class="pub-info">September 30, 2019 // 7 min read</span>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dicta officiis tenetur quas unde, at assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
</a>
</div>
Topic Containers
This component is meant to be used to provide an overview of a service area or outcome. The text should be limited to about 90 words in no more than three paragraphs. When multiple Topic Containers are used together on a page you should alternate between the default .topic-container and .topic-container-right so the images will alternate between the left and right side.
Image Left
Improve Your Product Design Thinking
How well does your team know your customers’ wants, needs, fears, and desires?
These basic psychological forces drive every decision people make, including whether to use your products. Understanding them is critical to building web & mobile apps people love to use.
Coaching your team to get a better understanding of your customers will help you improve existing products, generate new concepts, and spark innovation.
<div class="topic-container">
<div class="row">
<div class="topic-image" style="background-image: url(/assets/img/stock.jpg)"></div>
<div class="topic-content">
<div class="highlight-bar"></div>
<h2>Improve Your Product Design Thinking</h2>
<h6>How well does your team know your customers’ wants, needs, fears, and desires?</h6>
<p>These basic psychological forces drive every decision people make, including whether to use your products. Understanding them is critical to building web & mobile apps people love to use.</p>
<p>Coaching your team to get a better understanding of your customers will help you improve existing products, generate new concepts, and spark innovation.</p>
</div>
</div>
</div>
Image Right
Customer Insights
How well do you know your customers’ wants, needs, fears, and desires?
These basic psychological forces drive every decision people make, including whether to use your products. Understanding them is critical to building web & mobile apps people love to use.
User research is invaluable when you're planning to improve your products or simply gauge users' interest in new ideas before spending money on development. You know - measure twice, cut once.
Through a better understanding of your users we can help you improve existing products, generate new concepts, and spark innovation.
<div class="topic-container-right">
<div class="row">
<div class="topic-image" style="background-image: url(/assets/img/stock.jpg)"></div>
<div class="topic-content">
<div class="highlight-bar"></div>
<h2>Customer Insights</h2>
<h6>How well do you know your customers’ wants, needs, fears, and desires?</h6>
<p>These basic psychological forces drive every decision people make, including whether to use your products. Understanding them is critical to building web & mobile apps people love to use.</p>
<p>User research is invaluable when you're planning to improve your products or simply gauge users' interest in new ideas before spending money on development. You know - measure twice, cut once.</p>
<p>Through a better understanding of your users we can help you improve existing products, generate new concepts, and spark innovation.</p>
<div class="related-actions">
<a href="">User Research</a>
<a href="">Empathy Mapping</a>
<a href="">User Journeys</a>
<a href="">User Task Outlines</a>
<a href="">Usability Testing</a>
</div>
</div>
</div>
</div>
Cross-link Fragments
These are typically used at the bottom of content pages to link to the other major content sections.
Outcomes
Your customers, your team, and your company need real results. That’s exactly what we deliver.
<p>Your customers, your team, and your company need real results. That’s exactly what we deliver.</p>
<a href="/outcomes/" class="btn btn-outline-primary">Outcomes We Produce</a>
Services
We thrive on understanding your business, your customers, and how to build products that create real value.
<p>We thrive on understanding your business, your customers, and how to build products that create real value.</p>
<a href="/services/" class="btn btn-outline-primary">Explore Our Services</a>
Process
Our proven process builds clarity around what you should do & confidence you’re doing it right.
<p>Our proven process builds clarity around what you should do & confidence you’re doing it right.</p>
<a href="/process/" class="btn btn-outline-primary">Discover Our Process</a>
Connect
Ready to talk about your project? Have a question about how we might help? We’d love to hear from you.
<p>Ready to talk about your project? Have a question about how we might help? We’d love to hear from you.</p>
<a href="/connect/" class="btn btn-primary">Get In Touch</a>