Styles (h1)

What is this about (h2)

The main title of pages and articles is an h1. The next title under the <h1> is the <h2>, shown above.

Buttons (h2)

There is a total of 6 buttons and 3 types of CTAs. The website is divided into three themes: The corporate, the ship and the rail. 

The breakdown of buttons and CTAs (h3)

• The corporate theme is branded in the red color and has 2 buttons and 1 CTA:
1. One button style is dark with a white text color
2. And the second button is white with red text color
3. The CTA is a link or a link styled button with a red animated arrow on hover
• The ship the is branded in the blue color and has 2 buttons and 1 CTA:
1. One button style is dark with a white text color
2. And the second button is white with red text color
3. The CTA is a link or a link styled button with a red animated arrow on hover
• The rail theme is branded in the green color and uses 2 button and one CTA:
1. One button style is dark with a white text color
2. And the second button is white with green text color
3. The CTA is a link or a link styled button with a green animated arrow on hover

Buttons styles (h3)

Use these classes to get the dark button styles.

Buttons styles (h4)

Classes:

btn btn-corporate

Example:

<button class="btn btn-corporate" type="button">Example corporate</button>

Button:

Example corporate

Classes:

btn btn-ship

Example:

<button class="btn btn-ship" type="button">Example ship</button>

Button:

Example ship

Classes:

btn btn-rail

Example:

<button class="btn btn-rail" type="button">Example rail</button>

Button:

Example rail

Use these classes to get the desired light button styles.

Classes:

btn btn-light-corporate

Example:

<button class="btn btn-light-corporate" type="button">Example corporate</button>

Button:

Example corporate

Classes:

btn btn-light-ship

Example:

<button class="btn btn-light-ship" type="button">Example ship</button>

Button:

Example ship

Classes:

btn btn-light-rail

Example:

<button class="btn btn-light-rail" type="button">Example rail</button>

Button:

Example rail

CTA link styles (h4)

Classes:

cta cta-corporate

Example:

<a href="#" class="cta cta-ship">Example corporate</a>

Link:

Example corporate

Classes:

cta cta-ship

Example:

<a href="#" class="cta cta-ship">Example ship</a>

Link:

Example ship

Classes:

cta cta-rail

Example:

<a href="#" class="cta cta-ship">Example rail</a>

Link:

Example rail

Other available buttons:

btn btn-primary btn btn-success btn btn-danger btn btn-warning btn btn-info

The link styled button

btn btn-link

The main sub-heading size (h2 again)

This is a normal paragraph. It will appear in most paragraphs and articles. The defaults are a black color, a font weight of 400 and a size of 18px. This is an example of bold text and this is the italic text and underlined text. The default spacing between headings and paragraphs are demonstrated below.

Spacing between paragraphs. This is a standard link in a body of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis tristique sollicitudin nibh sit. Mauris vitae ultricies leo integer malesuada. Diam in arcu cursus euismod quis viverra nibh cras. Mauris vitae ultricies leo integer. Dictum fusce ut placerat orci nulla pellentesque. Justo eget magna fermentum iaculis. Tellus pellentesque eu tincidunt tortor aliquam.

Quis enim lobortis (h3)

Sagittis vitae et leo duis ut diam quam nulla. Quis enim lobortis scelerisque fermentum dui faucibus in. Nulla pellentesque dignissim enim sit. Tincidunt id aliquet risus feugiat in ante. Venenatis cras sed felis eget velit aliquet sagittis. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Felis eget velit aliquet sagittis. In tellus integer feugiat scelerisque varius morbi enim. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Scelerisque in dictum non consectetur a erat nam at lectus. Amet justo donec enim diam vulputate ut pharetra sit

Tips for ckeditor5 Full html (h4)

If creating links, buttons or any stand-alone element using the ckeditor full html, ckeditor will insist on wrapping these element with p tags which will have a margin-bottom by default. So to avoid adding a useless 12px margin-bottom to elements like anchors and buttons, wrap those element with a div or span first, and ckeditor will leave them alone.