Colors
Color codes for reference
HTML
<div>
<p style="color: var(--mn-color-white)">mn-color-white: #ffffff</p>
<p style="color: var(--mn-color-lightgray)">mn-color-lightgray: #EFEFEF</p>
<p style="color: var(--mn-color-mediumgray)">mn-color-mediumgray: #CCCCCC</p>
<p style="color: var(--mn-color-darkgray)">mn-color-darkgray: #282828</p>
<p style="color: var(--mn-color-black)">mn-color-black: #000000</p>
<p style="color: var(--mn-color-purple)">mn-color-purple: #805EA8</p>
<p style="color: var(--mn-color-teal)">mn-color-teal: #04B0A9</p>
<p style="color: var(--mn-color-pink)">mn-color-pink: #D81670</p>
<p style="color: var(--mn-color-yellow)">mn-color-yellow: #2A72B9</p>
<p style="color: var(--mn-color-blue)">mn-color-blue: #805EA8</p>
<p style="color: var(--mn-color-red)">mn-color-red: #ED1E25</p>
<p style="color: var(--mn-color-orange)">mn-color-orange: #F58120</p>
<p style="color: var(--mn-color-green)">mn-color-green: #78BE43</p>
<p style="color: var(--mn-color-green-light)">mn-color-green-light: #78BE43</p>
<p style="color: var(--mn-color-green-medium)">mn-color-green-medium: #217D3E</p>
<p style="color: var(--mn-color-green-dark)">mn-color-orange: #06572D</p>
<p style="color: var(--mn-color-green-light-dark)">mn-color-green-light-dark: #217D3E</p>
<p style="color: var(--mn-color-purple-dark)">mn-color-purple-dark: #4C2C7B</p>
<p style="color: var(--mn-color-teal-dark)">mn-color-teal-dark: #007C82</p>
<p style="color: var(--mn-color-pink-dark)">mn-color-pink-dark: #B21F70</p>
<p style="color: var(--mn-color-yellow-dark)">mn-color-yellow-dark: #D7AE29</p>
<p style="color: var(--mn-color-blue-dark)">mn-color-blue-dark: #104E98</p>
<p style="color: var(--mn-color-red-dark)">mn-color-red-dark: #760f12</p>
<p style="color: var(--mn-color-orange-dark)">mn-color-orange-dark: #7a4010</p>
</div>
Result
mn-color-white: #ffffff
mn-color-lightgray: #EFEFEF
mn-color-mediumgray: #CCCCCC
mn-color-darkgray: #282828
mn-color-black: #000000
mn-color-purple: #805EA8
mn-color-teal: #04B0A9
mn-color-pink: #D81670
mn-color-yellow: #2A72B9
mn-color-blue: #805EA8
mn-color-red: #ED1E25
mn-color-orange: #F58120
mn-color-green: #78BE43
mn-color-green-light: #78BE43
mn-color-green-medium: #217D3E
mn-color-orange: #06572D
mn-color-green-light-dark: #217D3E
mn-color-purple-dark: #4C2C7B
mn-color-teal-dark: #007C82
mn-color-pink-dark: #B21F70
mn-color-yellow-dark: #D7AE29
mn-color-blue-dark: #104E98
mn-color-red-dark: #760f12
mn-color-orange-dark: #7a4010
Images
Image with rounded corners
HTML
<img src="/media/images/insights/2022/young-woman-welding-smiling.jpg" class="img-fluid rounded" alt="Placeholder">
Result
Image aligned right with text
HTML
<div class="clearfix">
<div class="w-50 float-end ms-3">
<img src="/media/images/insights/2022/young-woman-welding-smiling.jpg" class="img-fluid" alt="Placeholder">
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
</div>
</div>
Result
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Image aligned left with text
HTML
<div class="clearfix">
<div class="w-50 float-start me-3">
<img src="/media/images/insights/2022/young-woman-welding-smiling.jpg" class="img-fluid" alt="Placeholder">
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
</div>
</div>
Result
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, neque harum omnis necessitatibus pariatur voluptatibus beatae incidunt accusantium, autem odit laboriosam temporibus? Quisquam, delectus omnis saepe vero ipsam quos nobis.
Headings
Headings from (h1,h2,h3,h4,h5,h6):
HTML
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>
</div>
Result
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Typography
Display for different sizing without SEO
HTML
<div>
<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>
</div>
Result
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Lead paragraph
HTML
<div>
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
</div>
Result
This is a lead paragraph. It stands out from regular paragraphs.
Text formatting
HTML
<div>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
Result
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Blockquotes
HTML
<div>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
Result
A well-known quote, contained in a blockquote element.
Lists
HTML
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
Result
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
Inline lists
HTML
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
Result
- This is a list item.
- And another one.
- But they're displayed inline.
Tables
Basic table. Refer to Bootstrap documentation for customizations
HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Result
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |