# Cardinal Components

Components are the discrete, custom UI elements that consist of specific semantics and styling, and make up the bulk of a UI.

# Table of Contents

- [Overview](#overview)
- [Included Components](#included-components)

# Overview

Cardinal Components each represent a single part of a UI, and should never try to do too much. Components are designed to stand on their own, and be extremely portable and reusable.

They should also be encapsulated as much as possible, to prevent styles from leaking outside of the component. This isolation prevents unnecessary complexity and [side effects](http://cbrac.co/1KFudtE), and results in higher code reuse.

# Included Components

## Boxes

[View Demo](http://codepen.io/cbracco/pen/OVNVjR)

The [Box Component](https://github.com/cbracco/cardinal/blob/master/components/boxes.less) is a visual way to enclose content and make it stand out from its surroundings. There are a few different modifiers available for boxes to change border and shadow styles.

## Buttons

[View Demo](http://codepen.io/cbracco/pen/oXxXGr)

The [Button Component](https://github.com/cbracco/cardinal/blob/master/components/buttons.less) is a clickable item that usually causes a change in state or performs an action of some sort. There are several different modifiers available for changing sizes, colors, styles, and more.

## Forms

[View Demo](http://codepen.io/cbracco/pen/QbNbOM)

The [Form Component](https://github.com/cbracco/cardinal/blob/master/components/forms.less) introduces a very light design layer to default form elements.

## Lists

[View Demo](http://codepen.io/cbracco/pen/LVNVOK)

The [List Component](https://github.com/cbracco/cardinal/blob/master/components/lists.less) provides several different modifiers for manipulating default list styles.

## Tables

[View Demo](http://codepen.io/cbracco/pen/ZGWGvR)

The [Table Component](https://github.com/cbracco/cardinal/blob/master/components/tables.less) includes several modifiers for manipulating default table styles.

