Components

These are specific UI patterns that are designed to be as modular and extensible as possible.


Headings

A better way to do specific heading sizes. Rather than using H1, H2, H3, and so on to size your headings, you can use .title classes. Title modifiers can be added to any text to give you a specific size no matter the element you so chose to use.

Example

Title Headings

Title 1

Title 2

Title 3

Title 4

Title 5
Title 6

Subtitle Headings

Subtitles 1

Subtitles 2

Subtitles 3

Subtitles 4

Subtitles 5
Subtitles 6

Title Set

By using .title-set as a wrapper for your title and subtitle you can neutralize the spacing between the two. Thus creating a set with more untity between the elements.

Example

A leading title

A following subtitle.


Leads

Leads are a simple component that adds emphasis to titles and paragraphs. Add the class .lead to use.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla laboriosam quis non sapiente quasi, iure earum consequuntur labore quia ea.


Forms

Inputs

Even HTML treats inputs in a modular fashion. They are a child elmenet for the form element. Tent provides basic normalization for the raw input including coverage for the different input types such as text, email, tel, etc. Further input variations and styles will be covered in the Control Set section below. This is to keep inputs modular and structured with BEM.

Control Sets

Form control sets are small modular components that handle numerous variations responsibly.

Control Block Modifier (Full-Width)

A .control.control--block modifier expands an inner child element to be full-width along with the control container itself. Use full-width controls in combination with the grid.

Control Inline Modifier

Adding .control.control--inline extends the Flex object. Add .control.control--radio.control--inline or .control.control--checkbox.control--inline will set checkboxes and radios to be inline.

A Basic Form Example

Example

Buttons

Types

Example

Colors

Example

Sizes

Example

Cards

A card is a multi-use component that can be extended to make many other common components such as panels, alerts, toasts, and any other rectangular boxes you can think of. Instead of bloating the framework with these other components we figured it is best to show you how versitale the base card properities can be.

Panel Cards

Example
A normal card panel.
A clear card panel without a border.

Feature Leader Cards

Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.

Feature / Service Blocks

You can easily create the common UX pattern of feature / service blocks with cards.

Example

Title 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt laudantium possimus voluptate doloribus esse voluptates deserunt aperiam dolorum vel vero.

Learn More

Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt laudantium possimus voluptate doloribus esse voluptates deserunt aperiam dolorum vel vero.

Learn More

Title 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt laudantium possimus voluptate doloribus esse voluptates deserunt aperiam dolorum vel vero.

Learn More

Card Color Variations

By stringing a few classes together you can create other components like panels and alerts. Extend the cards by adjusting the padding and drop in your icons for that alert box feel.

Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laborum.