Background Colors

We have a few background colors that can be used in various contexts. These are not for use as the entire page background but instead for specific components and modules on the page.

backgroundLowlight

backgroundHighlight

backgroundBasic

backgroundInverse

Buttons

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element:

Don't click
<button class="btn btnDefault">Click</button>
<a class="btn btnDefault" href="http://trulia.com">Don't click</a>

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

Button Sizes

There are three 3 sizes for buttons: Large, medium (default) and small. Simply apply the size modifier class for the desired size. There is also an additional modifier that will make the button take the full width of the container. It may be used with the any of the button size and style modifiers.

Button	Modifier Class
	`btn btnDefault btnLrg`
	`btn btnDefault`
	`btn btnDefault btnSml`
	`btn btnDefault btnFullWidth`

Button Styles

Button	Class	Description
	`btn btnDefault`	This is what buttons look like, this is the go to button style.
	`btn btnPrimary`	Use this button as the primary call to action
	`btn btnDanger`	This button is for delete actions, these actions should also have a confirmation dialog
	`btn btnDisabled`	I'm afraid I can't let you do that, yet.