Basic UI Elements

Colors

Primary Colors

• $kkg-kappa-blue
• $kkg-gamma-blue

Secondary Colors

• $kkg-key-gold
• $kkg-bright-blue
• $kkg-light-blue
• $kkg-silver
• $kkg-dark-silver

Status Colors

These colors are not brand colors and should only be used to convey status messages, e.g. success and failure.

• $kkg-green
• $kkg-red

GrayScale

• $kkg-gray-lightest
• $kkg-lighter
• $kkg-gray-light
• $kkg-gray
• $kkg-gray-medium
• $kkg-gray-dark
• $kkg-gray-darker
• $kkg-gray-darkest
• $kkg-black

Blue Text

<span class="text-blue">Blue Text</span>

Gold Text

<span class="text-gold">Gold Text</span>

Dark Blue Text

<span class="text-navy">Dark Blue Text</span>

Light Text

<span class="text-light">Light Text</span>

Dark Text

<span class="text-dark">Dark Text</span>

Red Text

<span class="text-red">Red Text</span>

Gray Lightest Text

<span class="text-gray-lightest">Gray Lightest Text</span>

Gray Lighter Text

<span class="text-gray-lighter">Gray Lighter Text</span>

Gray Light Text

<span class="text-gray-light">Gray Light Text</span>

Gray Text

<span class="text-gray">Gray Text</span>

Gray Medium Text

<span class="text-gray-medium">Gray Medium Text</span>

Gray Dark Text

<span class="text-gray-dark">Gray Dark Text</span>

Gray Darker Text

<span class="text-gray-darker">Gray Darker Text</span>

Gray Darkest Text

<span class="text-gray-darkest">Gray Darkest Text</span>

Black Text

<span class="text-black">Black Text</span>

Brand Specific

• .icon-pay-dues
• .icon-donate
• .icon-shop
• .icon-login

General Use Icons

• .icon-image
• .icon-check-circle
• .icon-caret-up
• .icon-caret-down
• .icon-users
• .icon-user
• .icon-calendar
• .icon-newspaper-o
• .icon-chevron-right
• .icon-chevron-left
• .icon-chevron-circle-up
• .icon-chevron-circle-down
• .icon-search
• .icon-edit
• .icon-times

Social Icons

• .icon-facebook
• .icon-twitter
• .icon-instagram
• .icon-linkedin
• .icon-pinterest
• .icon-youtube

Standard Link

Striped Table

		<div class="table-wrap">
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Chapter</th>
						<th>School</th>
						<th>Contact</th>
						<th>District <i class="icon-chevron-circle-up"></i></th>
						<th>Status <i class="icon-chevron-circle-down"></i></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Beta Eta Deuteron</td>
						<td>Stanford</td>
						<td>kkgbetaeta@gmail.com</td>
						<td>Pi</td>
						<td>Active</td>
					</tr>...
				</tbody>
			</table>
		</div>
						

Standard Table

		<div class="table-wrap">
			<table class="table">
					<thead>
					<tr>
						<th>Chapter</th>
						<th>School</th>
						<th>Contact</th>
						<th>District</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Beta Eta Deuteron</td>
						<td>Stanford</td>
						<td>kkgbetaeta@gmail.com</td>
						<td>Pi</td>
						<td>Active</td>
					</tr>...
				</tbody>
			</table>
		</div>
						

Padding and Margin Helper Classes

Padding and margin on standard elements is achieved by using the bootstrap 4 helper classes. To understand how to use the pattern and margin classes please see https://getbootstrap.com/docs/4.5/utilities/spacing/

Full Width Breakout Class

If you find that your code is showing within a container on the site, at any time if you want to break out of that container to go full width with your content you can add a class of .full-width to any div. This will not work however if your are inside a bootstrap column element unless it is a .col-12 element

Below is an example. the divs have an outline around them to show you how it is working. The container div has an orange outline and the full-width element has a green outline

Panels / Cards