Base element styles control native HTML elements such as headings, paragraphs, buttons, and forms in a systematic and opinionated way.These styles include typographical considerations and utilities derived from base elements, such as typefaces, the type scale, forms, and buttons.

Typography

Base type scale

Typographic elements are normalized to a simple type scale that works well across devices. Default top and bottom margins are set for commonly-used typographic elements.

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

Hamburger 5

Hamburger 6

Type scale utilities

The .h1 – .h6 font-size utilities can be used to override an element’s default size.

Pastrami 1

Pastrami 2

Pastrami 3

Pastrami 4

Pastrami 5

Pastrami 6

Lists

By default, lists have bullets or numbers and padding left.

• Half-Smoke
• Kielbasa
• Bologna

1. Prosciutto
2. Andouille
3. Bratwurst
4. Chorizo

Forms

Forms use base styles for their structure with color styles applied to adjust the look and feel. This creates a rhythmic consitency among all forms while allowing thematic differences where needed. Form elements do not rely on nested styles or markup structure, so utility styles can be used for contextual adjustments.

Inline Forms

By default, form elements display inline.

Stacked Forms

Use .block and other utilities to stack form elements. The use of utilities allows for a lot of flexibility when building form layouts.

Fieldsets can be reset with .fieldset-reset to allow for easier styling of the fieldset and legend.

Buttons

Structural styles and resets for buttons are set in base. All buttons share common padding and height, well suited for tap targets on touchscreen displays. Color styles and other custom extensions adjust their surface-level appearance.

Button Link Button

Button Blue Button Blue Outline Button Gray Button Red Button Green

Burgers Fries Shakes

Tables

Default table styles are defined in base. Use the table-light color style with other color utilities or create custom theme extensions to suit your needs.

Columns

• Column A

  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

• Column B

  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

• Column C

  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.