Savile Home

Components

The header component has optional navigation links. The class .s-nav-sticky is optional and will add a sticky position.

<nav class="s-nav s-nav-sticky">
  <a class="s-nav-icon" href="/">
    <img src="https://assets.turing.edu/turing-school-mark-gray.png" alt="Home" />
  </a>
  <ul class="s-nav-menu">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
  </ul>
</nav>

Cards

Both card variants are block elements, so will take the up the width of their parent container unless provided with rules to limit their width. The examples below show cards that are the width of this page because no additional styling has been placed on their parent containers.

Basic Card

The basic card allows for a title, subtitle, content, and footer - all of which are optional. The following example shows a card that uses all options.

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus odio quis sit mattis in luctus. Dignissim auctor aliquam suspendisse non in ac, purus. Aliquam arcu justo quam lorem at id proin morbi. A arcu accumsan, eu id fringilla non.

Footer content
<div class="s-card">
 <div class="s-card-header">
   <h2 class="s-card-title">Card Title</h2>
   <h3 class="s-card-subtitle">Card Subtitle</h3>
 </div> 
 <div class="s-card-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus odio quis sit mattis in luctus. Dignissim auctor aliquam suspendisse non in ac, purus. Aliquam arcu justo quam lorem at id proin morbi. A arcu accumsan, eu id fringilla non.</p>
 </div>
 <div class="s-card-footer">Footer content</div>
</div>

Profile Card

The Profile Card is designed to include a photo in the header, an addition to title, subtitle, content, and a button. The example that follows demonstrates how color variants can be achieved using the color utils.

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus odio quis sit mattis in luctus. Dignissim auctor aliquam suspendisse non in ac, purus. Aliquam arcu justo quam lorem at id proin morbi. A arcu accumsan, eu id fringilla non.

<div class="s-card s-card-profile s-border-yellow-500">
 <div class="s-card-header">
   <img class="s-card-profile-pic" src="https://d682ma8ami8n4.cloudfront.net/images/staff/kasperowicz.jpg">
   <div class="s-card-header-right">
     <h2 class="s-card-title">Card Title</h2>
     <h3 class="s-card-subtitle">Card Subtitle</h3>
   </div> 
 </div> 
 <div class="s-card-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus odio quis sit mattis in luctus. Dignissim auctor aliquam suspendisse non in ac, purus. Aliquam arcu justo quam lorem at id proin morbi. A arcu accumsan, eu id fringilla non.</p>
 </div>
 <div class="s-card-footer">
   <button class="s-button s-button-secondary">Example Button</button>
 </div>
</div>

The .s-footer class can be applied to any container element to create a footer. It has accompanying classes for any children it contains. The examples below demonstrate how they can be used in various combinations; but the content presented is not defined.

Simple Footer

Simple footer with paragraph text only. The .s-footer-content class should be used on the container that wraps content.

Turing School of Software and Design, a Colorado Non-Profit Organization.

<footer class="s-footer">
 <div class="s-footer-content">
   <p>Turing School of Software and Design, a Colorado Non-Profit Organization.</p>
 </div>
</footer>

Footer with Links

Footer with paragraph text and one set of links. Use of the .s-footer-right and .s-footer-link classes ensure proper spacing between links.

<footer class="s-footer">
 <div class="s-footer-content">
   <p>Turing School of Software and Design, a Colorado Non-Profit Organization.</p>
 </div>
 <div class="s-footer-right">
   <a class="s-footer-link">Privacy Policy</a>
   <a class="s-footer-link">Programs</a>
   <a class="s-footer-link">Try Coding</a>
 </div>
</footer>

Footer with Links and Social Icons

Footer with two set of links; one being social icons. Use of the .s-footer-right and .s-footer-left, and .s-footer-icon and .s-footer-link classes ensure proper spacing between links and icons within their respective containers, as well as vertical alignment.

<footer class="s-footer">
 <div class="s-footer-left">
   <a class="s-footer-icon"><img src="https://turing-io-assets.s3-us-west-2.amazonaws.com/images/facebook-grey-100.svg"/></a>
   <a class="s-footer-icon"><img src="https://turing-io-assets.s3-us-west-2.amazonaws.com/images/twitter-grey-100.svg"/></a>
   <a class="s-footer-icon"><img src="https://turing-io-assets.s3-us-west-2.amazonaws.com/images/github-grey-100.svg"/></a>
 </div> 
 <div class="s-footer-right">
   <a class="s-footer-link">Privacy Policy</a>
   <a class="s-footer-link">Contact</a>
   <a class="s-footer-link">Perspectives</a>
 </div>
</footer>