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
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, and results in higher code reuse.
The Box Component 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.
The Button Component 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.
The Form Component introduces a very light design layer to default form elements.
The List Component provides several different modifiers for manipulating default list styles.
The Table Component includes several modifiers for manipulating default table styles.