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>