Global CSS Guidelines

GLOBAL CSS ONLY DEFINED IN GLOBAL.CSS

All global styles are defined only in global.css. Any other declarations should be selector-specific, e.g.:

.sector-callout-images .container h5 { ... }

Component-specific CSS is located in their respective files in chronological order (e.g., sector-callout.css).

CSS File Structure

global.css contains universal styles:

* { }
html { }
body { }
sector { }
sector .text h1 { }

All CSS files are included via import.css.

CSS files are ordered based on their appearance on the front page.

Containers & Grid Layout

Container: <div class="container-xl my-5"></div>

Fullwidth: <div class="container-flui"></div>

Rows: <div class="row"></div>

Grid Layouts:

  • <div class="col-12 col-sm-6 col-lg-3 g-4"></div> (4-column layout)
  • <div class="col-12 col-sm-6 col-lg-4 g-4"></div> (3-column layout)
  • <div class="col-12 col-sm-6 col-md-6 col-lg-6 g-4"></div> (2-column layout)
  • <div class="col-12 col-sm-6 col-md-4 col-lg-2 g-4"></div> (5-column layout)

Accessibility & SEO

alt tags are defined by the component title.

Title tags follow the same logic.

Design Consistency

Brand Colors (Defined in global.css)
  • Red: #EC2226
  • Dark Blue: #002169
  • Light Blue: #D9E8F9 / #F0F6FD
  • Grey Containers: #F1F1F1
  • Grey Borders: #6d6d6f
  • Orange: #d0796f

Spacing & Styling

  • Rounded Corners: border-radius: 15px;
  • Button Padding: 10px 15px;

Global Headers & Body

This is Header 1 this is a span

This is Header 2 this is a span

This is Header 3 this is a span

This is Header 4 this is a span

This is Header 5 this is a span
This is Header 6 this is a span

This is a random paragraph, and in a standard paragraph we can use bold text, we can add a hyperlink or we could make the text italic, each paragraph will also have 20pixels space below by default.

We could even try them all together?

Core Buttons

Advanced Buttons

Button Class Large Buttons (Normal) Small Buttons
btn-dark
btn-dark:hover 		What we do What we do
btn-outline-blue
btn-outline-blue:hover 		What we do What we do
btn-light-gray
btn-light-gray:hover 		What we do What we do
btn-outline-blue-arrow btn-arrow
btn-outline-blue-arrow btn-arrow:hover 		What we do What we do
btn-blue-solid btn-arrow
btn-blue-solid btn-arrow:hover 		What we do What we do
btn-text btn-arrow
btn-text btn-arrow:hover 		What we do What we do

Tabluar Data

Table header Table header Table header Table header
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla

Default Lists

Unordered list:

Ordered List:

  1. List ltem
  2. List ltem
  3. List ltem
  4. List ltem link

Form Inputs

fieldset
form












Icon Reference Table

Icon Class Name
.fa-arrow-up
.fa-arrow-right
.icon-outline .fa-arrow-left
.icon-outline .fa-arrow-right
.icon-filled .fa-arrow-left
.icon-filled .fa-arrow-right
.fa-magnifying-glass
.fa-chevron-down
.fa-bars
.fa-plus
.fa-comment-dots
.icon-left-special .fa-arrow-left

Pagination