Mesriani Law Website Style Guide
Colors
Variables : $default, $red, $brown, $darkblue, $black
Fonts
Primary Font Is Montserrat
font-family: $primaryfont;
Secondary Font Is Source Sans Pro
font-family: $secondaryfont;
Button Types
<a href="#" class="btn btn-primary">Primary Button</a>
<a href="#" class="btn btn-secondary">Secondary Button</a>
<a href="#" class="btn btn-primary btn-outlined">Primary Button</a>
<a href="#" class="btn btn-secondary btn-outlined">Secondary Button</a>
Button Sizes
Small Button: <a href="#" class="btn btn-sm">Small Button</a>
Medium Button: <a href="#" class="btn">Medium Button</a>
Large Button: <a href="#" class="btn btn-lg">Large Button</a>
Headers
<H1> Heading
<H2> Heading
<H3> Heading
<H4> Heading
<H5> Heading
<H6> Heading
Tables
Column Header | Column Header | Column Header |
---|---|---|
Column Text | Column Text | Column Text |
Column Text | Column Text | Column Text |
Column Text | Column Text | Column Text |
<table class="table">
<thead>
<tr>
<th>Column Header</th>
<th class="align-center">Column Header</th>
<th class="align-right">Column Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column Text</td>
<td class="align-center">Column Text</td>
<td class="align-right">Column Text</td>
</tr>
<tr>
<th>Column Text</th>
<td class="align-center">Column Text</td>
<td class="align-right">Column Text</td>
</tr>
<tr>
<td>Column Text</td>
<td class="align-center">Column Text</td>
<td class="align-right">Column Text</td>
</tr>
</tbody>
</table>