---
title: Component Library
collection: 
  - index
  - home
permalink: false
---
# *NAME*

The *NAME* UI Component Library provides plug-and-play design and code to help you set a new bar for simplicity and consistency across your sites.

The Library consists of semantic and accessible markup for a variety of components that can be paired with a [theme](#available-themes) to quickly give components a consistent look.

---

## Getting Started

[For Developers](#for-developers)

[For Designers](#for-designers)

[The Components](#components)

[The Themes](#available-themes)

---

## For Developers

*NAME* components are built on a semantic and accessible markup foundation, to work with all modern browsers (IE 10, Chrome, Firefox, Safari).

### Installation

Here are a few ways to use the *NAME* in your projects.

#### Download

...

#### Install with NPM

If you have node installed on your machine, you can use npm to install *NAME*.

...

#### Need Installation Help

Do you have questions or need help with setup? Did you run into any weird errors while following these instructions? Feel free to open an issue here:

[https://github.com/unumux/components/issues](https://github.com/unumux/components/issues)

### CSS Architecture

### So you need to make a new component

### Customization/Themeing

#### Recommended Project CSS/SCSS Directory Structure

We recommend that for your project component styling, you use a directory pattern similiar to that of the *NAME* Library. With a couple of changes to house code that overrides theme and/or component styling

```
.
├── /styles
├──── /components
├──────── _index.scss (Imports _index.scss from each component folder))
├──────── /my-new-component
|           _index.scss (Imports my-new-component partials)
|           _my-new-component.scss (Base styles for new component block)
|           _sub-element-1.scss (Styles for a specific sub-element of the new component block)
|           _sub-element-2.scss (Styles for a specific sub-element of the new component block)
├──────── /primary-nav
|           _index.scss (Imports primary-nav partials)
|           _list.scss (Styles for the list sub-element of the primary nav block)
|           _primary-nav.scss (Base styles for primary nav block)
├──── /theme-overrides
|       _color-variables.scss (Used to override color variables from Theme)
|       _font-variables.scss (Used to override font variable from Theme)
|       _index.scss (Imports theme-override partials)
|       _sizing-variables.scss (Used to override padding, margin, border, etc. variables from Theme)
├── _site.scss (Imports _index.scss files from components and theme-overrides folders (plus any additional folders you have))
```

#### Main Variables That Can Be Overridden

### Where Things Live

- HTML
- SCSS / Compiled CSS
- Fonts
- Images

### Including in a Project

If you downloaded the source code you can include the CSS file in your project and reference it in your index.html file.

If you installed via NPM and are using SCSS you can include *NAME* and a theme in your project's primary SCSS file like so:

```SCSS
// Standard way to include a theme and *NAME* in a project
// _site.scss or _index.scss
@import "theme-themeName"
@import "*NAME* Component Library"
```

```SCSS
// Include a theme, *Name*, and override files in a project
// _site.scss or _index.scss
@import "theme-themeName"
@import Theme Variable Override Files
@import "*NAME* Component Library"
@import Component Override Files
```


### FAQs

- I need a component that is not in the library
- I installed the library and added a component to my HTML but it doesn't look right
- How do I change some of the default styles of a component


---

## For Designers

---

## Components

- Navigation
  - [Primary Navigation](./components/primary-nav)
  - [Secondary Navigation](./components/secondary-nav)
  - [Footer Navigation](./components/footer-nav)
  - [Breadcrumbs](./components/breadcrumbs)
  - [Skip Link](./components/skip-nav)

- Inputs / Controls
  - [Button](./components/button)
  - [Button with Icon](./components/button-with-icon)

- Special Messaging
  - [Dialog](./components/dialog)
  - [Modal](./components/modal)
  - [Global Alerts](./components/global-alert)
  - [Inline Alerts](./components/inline-alert)

- Containers
  - [Page Header](./components/page-header)
  - [Page Content](./components/page-content)
  - [Page Footer](./components/page-footer)
  - [Banner](./components/banner)
  - [Summary](./components/summary)
  - [Grid Block](./components/grid)
  - [Table](./components/table)
  - [Logo Link](./components/logo-link)

---

## Available Themes

- [High Contrast](https://github.com/unumux/theme-enterprise-high-contrast)
  - Open Sans Fonts (enterprise)

---

## Contributing

Found an issue of have an idea for enhancement? Open an [issue](https://help.github.com/articles/creating-an-issue/).

Want to add code? [Contribute](https://github.com/unumux/colonial-branding-alpha/blob/master/CONTRIBUTING.html)