sprout credit union

In-Text link

CSS selector:

.in-text-link

Sample code:

Rendered element:

Navigation Button

CSS selector

.nav-button

Sample code:

<nav class="nav-bar">
<a href="#" class="nav-button">Nav Button</a>
</nav>

            

Rendered element:

Submit & Reset Button for Forms

CSS selector

.submit-button

.reset-button

Sample code:

<input class="submit-button" type="submit" value="Submit">
<a class="reset-button" href="#">Reset</a>

            

Rendered element:

Text Input Field & Label

CSS selector

.text-input

Sample code:

<form class="text-input">
Enter information:<br>
<input type="text" name="example-info">
</form>

            

Rendered element:

Headings

CSS selectors:

h1, h2, and h3 element tags

Sample code:

<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>

            

Rendered element:

Paragraphs

CSS selector:

p element tag

Sample code:

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius quam neque, ut interdum mi volutpat eget. Suspendisse mauris turpis, gravida non purus nec, porta suscipit nisi.

Bulleted List

CSS selector:

ul element tag

Sample code:

<ul>
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>

            

Rendered element:

• Apple
• Orange
• Grape

Numbered List

CSS selector:

ol element tag

Sample code:

<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>

            

Rendered element:

1. Item A
2. Item B
3. Item C

Main Navigation

CSS selector:

Sample code:

<nav class="nav-bar">
<a href="#" class="nav-button" id="nav-bar">PRODUCTS</a>
<a href="#" class="nav-button" id="nav-bar">SERVICES</a>
<a href="#" class="nav-button" id="nav-bar">"APPLY</a>
</nav>

            

Rendered element:

Product Listing

CSS selector:

.product-listing

Sample code:

<div class="product-listing">
<img src="img/placeholder-house.jpeg" alt="Placeholder Image" class="placeholder">
<h2>Happy Mortgage</h2>
<h3>3.30% - 5 year closed</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius quam neque, ut interdum mi volutpat eget.</p>
<input class="submit-button" type="submit" value="APPLY">
</div>

            

Rendered element:

Happy Mortgage

3.30% - 5 year closed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius quam neque, ut interdum mi volutpat eget.

Website Grid Structure

CSS selector:

.container .block .col[#]

Sample code:

<div class="container">
<p class="block grid-structure col1">column 1</p>
<p class="block grid-structure col2">column 2</p>
<p class="block grid-structure col3">column 3</p>
</div>
<div class="container">
<p class="block grid-structure col1">column 1</p>
<p class="block grid-structure col2">column 2</p>
<p class="block grid-structure col3">column 3</p>
<p class="block grid-structure col4">column 4</p>
</div>

            

Rendered element:

Website Colour Swatches

CSS selector:

.container .block .swatch .s[#]

Sample code:

<div class="container">
  <p class="block swatch s1">#17C11A</p>
  <p class="block swatch s2">#C8E9A0</p>
  <p class="block swatch s3">#17BEC1</p>
  <p class="block swatch s4">#FFFFFF</p>
  <p class="block swatch s5">#DBDBDB</p>
  <p class="block swatch s6">#2D2D2D</p>
</div>

            

Rendered element: