Style

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

Logo Styles

Text Styles

Fonts

Headline Font: Barlow Condensed, sans-serif

Body Font: Open Sans, sans-serif

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

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:
#8A3E96
Secondary:
#63B4B8
Success:
#28a745
Info:
#63B4B8
Warning:
#FFC107
Danger:
#dc3545
Dark:
#343A40
Light:
#F8F9FA

Solid Buttons

Primary Secondary Success Danger Warning Info Light Dark

Outline Buttons

Primary Secondary Success Danger Warning Info Light Dark

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Banner size - 1400 X 600

banner-image

Social Media/Meta Image size - 1200 X 628

banner-image

News Card

Latest News

Lorem ipsum dolor sit

September 29, 2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

READ MORE

Basic structure code

<article class="news-card card border-0 bg-transparent position-relative shadow-none zoom-shadow-effect h-100"> <div class="card-img-top position-relative"> <a href="#"> <img class="w-100" src="img-path" alt="Latest News" /> </a> </div> <div class="card-body details position-relative px-4 py-0 mt-n5"> <div class="inner-cont bg-white p-md-4 p-4 float-none d-inline-block w-100 shadow-lg position-relative h-100"> <h3 class="font-weight-bold "><a href="#">Card Title</a></h3> <div class="post-details float-left w-100 text-uppercase"> <p class="date float-left position-relative small text-dark"><i class="far fa-calendar-alt text-primary" aria-hidden="true"></i> September 29, 2021</p> </div> <p class="text-dark">Card Content</p> <a class="read-more font-weight-bold position-relative" href="#">READ MORE</a> </div> </div> </article>

Success Card

News-Img
September 29, 2021

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Read more

Basic structure code

<article class="card stories-card bg-light position-relative"> <header class="image position-relative overflow-hidden"> <a href="#"> <img class="card-img-top" src="img-path" alt="News-Img" /> </a> </header> <div class="p-4 card-body overlay-bg text-white bg-dark-primary"> <div class="w-100"> <h6 class="mb-3 date w-100"><i class="fas fa-calendar-alt mr-2" aria-hidden="true"></i> September 29, 2021</h6> <h3 class="mb-3 float-left w-100 head-title w-100"> <a class="text-white" href="#">Card Title</a> </h3> <p><span>Card Content </span></p> <p class="mt-2 mb-0 w-100"> <a class="btn btn-sm text-uppercase text-white" href="#">Read more</a> </p> </div> </div> </article>

Success Card Second version

News-Img
September 29, 2021

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Read more

Basic structure code

<article class="card stories-card-2 bg-light position-relative"> <header class="image position-relative overflow-hidden"> <a href="#"> <img class="card-img-top" src="img-path" alt="News-Img" /> </a> </header> <div class="p-4 card-body text-white bg-primary"> <div class="w-100"> <h6 class="mb-3 date w-100"><i class="fas fa-calendar-alt mr-2" aria-hidden="true"></i> September 29, 2021</h6> <h3 class="mb-3 float-left w-100 head-title w-100"> <a class="text-white" href="#">Card Title</a> </h3> <p><span>Card Content </span></p> <p class="mt-2 mb-0 w-100"> <a class="btn btn-sm btn-secondary text-uppercase text-white" href="#">Read more</a> </p> </div> </div> </article>

Events Card

Basic structure code

<article class="news-v6-card bg-primary text-white main-card position-relative h-100"> <header class="image position-relative overflow-hidden"> <a href="#"> <img class="w-10" src="img-path" alt="Events" /> </a> </header> <h6 class="date bg-primary text-white"> <span class="inr-date float-left w-100">17</span><br>January<br>2022 </h6> <div class="p-4 details position-relative overflow-hidden "> <h4 class="location position-relative mb-2"><i class="fas fa-map-marker-alt text-white" aria-hidden="true"></i> Via Zoom</h4> <h3 class="mb-3"> <a class="text-white" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a> </h3> <p class="mt-2 readmore-sec"> <a class="text-uppercase btn btn-sm btn-outline-light" href="#">SEE DETAILS</a> </p> </div> </article>

Profile Card

Basic structure code

<article class="profile-card card position-relative"> <a href="#"> <div class="card-img-top position-relative rounded overflow-hidden"> <img alt="team" src="img-path" /> </div> <div class="card-body"> <div class="text-container"> <div class="cont"> <h4 class="card-title font-weight-bold"> Profile Name</h4> <h5 class="location font-weight-bold">Profile Location</h5> </div> </div> </div> </a> </article>

Team Card

Basic structure code

<article class="team-card card position-relative h-100"> <a class="wrapper h-100" href="#"> <div class="card-img-top position-relative rounded overflow-hidden"> <img alt="team" with="200" height="200" src="img-path" /> </div> <div class="card-body"> <div class="text-container"> <div class="cont"> <h4 class="card-title font-weight-bold mb-1">Team Name</h4> <h5 class="card-title font-weight-bold">Team Designation</h5> Card Content </div> </div> </div> </a> </article>