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.
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.
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.
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
ExampleButtons
Types
ExampleColors
ExampleSizes
ExampleCards
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
ExampleFeature Leader Cards
ExampleFeature / Service Blocks
You can easily create the common UX pattern of feature / service blocks with cards.
ExampleTitle 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt laudantium possimus voluptate doloribus esse voluptates deserunt aperiam dolorum vel vero.
Learn MoreTitle 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt laudantium possimus voluptate doloribus esse voluptates deserunt aperiam dolorum vel vero.
Learn MoreTitle 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt laudantium possimus voluptate doloribus esse voluptates deserunt aperiam dolorum vel vero.
Learn MoreCard 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