Style Guide

This is the style guide approved by UFW Foundation. Text, Colors, Buttons and related classes and shades are included here for reference.

Text Styles

Fonts

Headline Font:Myriad-pro, Montserrat, Source Sans Pro, Avenir, Helvetica Neue, Helvetica, Arial, Sans-Serif,

Body Font: Fira Sans, Myriad-pro, Source Sans Pro, Avenir, Helvetica Neue, Helvetica, Arial, Sans-Serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Monospace Font: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Headline Styles

This line is an example of our H1 Style

This line is an example of our H2 Style

This line is an example of our H3 Style

This line is an example of our H4 Style

This line is an example of our H5 Style
This line is an example of our H6 Style

Body Text

This color corresponds to our normal text style. Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply.

Unordered List

  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply

Ordered List

  1. Lorem Ipsum is simply
  2. Lorem Ipsum is simply
  3. Lorem Ipsum is simply
  4. Lorem Ipsum is simply
  5. Lorem Ipsum is simply

Colors

Colored Text

This text color corresponds to .text-primary class.

This text color corresponds to .text-secondary class.

This color corresponds to .text-success class

This color corresponds to .text-info class

This color corresponds to .text-warning class

This text color corresponds to .text-danger class

This color corresponds to .text-light class

This color corresponds to .text-dark class

This color corresponds to .text-muted class

This color corresponds to .text-white class

Colored Shades

Primary:
#D50000
Secondary:
#25C8D0
Success:
#28A745
Info:
#17A2B8
Warning:
#FFCC00
Danger:
#D50000
Dark:
#343A40
Light:
#F8F9FA
Indigo:
#6610f2
Purple:
#6F42C1
Pink:
#E83E8C
Red:
#D50000
Orange:
#FD7E14
Yellow:
#FFCC00
Green:
#28A745
Teal:
#20C997
Cyan:
#04989E

Mono Text

This text is colored white:#ffffff

This text is colored gray-100:#f8f9fa

This text is colored gray-200:#e9ecef

This text is colored gray-300:#dee2e6

This text is colored gray-400:#ced4da

This text is colored gray-500:#adb5bd

This text is colored gray-600:#6c757d

This text is colored gray-700:#495057

This text is colored gray-800:#343a40

This text is colored gray-900:#212529

This text is colored black:#000000

Mono Shades

white:
#FFFFFF
gray-100:
#F8F9FA
gray-200:
#E9ECEF
gray-300:
#EAEAEA
gray-400:
#CED4DA
gray-500:
#ADB5BD
gray-600:
#6C757D
gray-700:
#495057
gray-800:
#343A40
gray-900:
#212529
black:
#000000

Buttons

Primary Secondary Success Danger Warning Info Light Dark

News Card

Card class: news-card
Hover class: zoom-shadow-effect
April 23, 2020 Australia

Lorem Ipsum is simply dummy text of the printing

READ MORE
Card class: news-card
Hover class: slide-shade-effect
April 23, 2020 Australia

Lorem Ipsum is simply dummy text of the printing

READ MORE
Basic structure code
<div class="news-card card border-0 position-relative shadow-none zoom-shadow-effect"> <div class="card-img-top position-relative"> <a href="/lorem_ipsum_is_simply_dummy_text_of_the_printing"> <img class="mw-100 w-100" src="http://d3n8a8pro7vhmx.cloudfront.net/themes/5f9ceccd4445ea22ba5798bd/attachments/original/1604659499/dummy-img.jpg"> </a> </div> <div class="card-body details position-relative px-4 py-0"> <div class="inner-cont bg-white p-md-4 p-4 float-none d-inline-block w-100 shadow-lg position-relative"> <span class="date">April 23, 2020</span> <span class="address">Australia</span> <h3><a href="/lorem_ipsum_is_simply_dummy_text_of_the_printing">Lorem Ipsum is simply dummy text of the printing</a></h3> <a href="/lorem_ipsum_is_simply_dummy_text_of_the_printing" class="btn btn-danger">READ MORE</a> </div> </div> </div>

Press Release Card

Card class: press-release-card
Hover class: zoom-shadow-effect

Lorem Ipsum is simply dummy text of the printing

Posted on April 23, 2020

By

Card class: press-release-card
Hover class: slide-shade-effect

Lorem Ipsum is simply dummy text of the printing

Posted on April 23, 2020

By

Basic structure code
<div class="press-release-card card border-0 position-relative shadow-none zoom-shadow-effect"> <div class="card-img-top position-relative"> <a href="/lorem_ipsum_is_simply_dummy_text_of_the_printing"> <img class="mw-100 w-100" src="http://d3n8a8pro7vhmx.cloudfront.net/themes/5f9ceccd4445ea22ba5798bd/attachments/original/1604659499/dummy-img.jpg"> </a> </div> <div class="card-body details position-relative px-0 py-0 mt-0"> <div class="inner-cont bg-white p-lg-4 p-4 float-none d-inline-block w-100 shadow-lg position-relative"> <div class="cont"> <h3 class="font-weight-bold "><a href="/lorem_ipsum_is_simply_dummy_text_of_the_printing">Lorem Ipsum is simply dummy text of the printing</a></h3> <div class="post-details float-left w-100 "><p class="date float-none d-inline-block align-middle position-relative small">Posted on April 23, 2020</p> <p class="author float-none d-inline-block align-middle position-relative small">By <span class="linked-signup-name">Rana Ron</span></p></div> </div> </div> </div> </div>

Grow Card

Card class: news-card

Lorem Ipsum

Basic structure code
<div class="card grow-card"> <a href="/lorem_ipsum_is_simply_dummy_text_of_the_printing"> <img class="mw-100 w-100" src="images" /> </a> <div class="card-img-overlay"> <div class="cont"> <h3 class="text-white"><a class="text-white" href="/lorem_ipsum_is_simply_dummy_text_of_the_printing">Lorem Ipsum</a></h3> </div> </div> <a class="main-link" href="/lorem_ipsum_is_simply_dummy_text_of_the_printing"></a> </div>