3. Components

Components contain both styling and often layout information. They are tightly coupled with content and may or may not consist of objects.

Flavours

Buttons come in three flavours, button-primary, button-secondary, and button-white. To invert white add --inverted to the end of the class name, e.g. button-white--inverted.

button-primary

button-secondary

button-white

button-white--inverted

Sizes

Three buttons sizes are available by adding an extra size modifier, button--l, default (same as large, no class required), button--s and button--xs. Note: You can use a size modifier with any of the button styles above.

Minimum and Maximum Width

By default buttons grow to fit their text, but for visual consistency you can also set a minimum or maximum width using button--set-min-width or button--set-max-width.

Button

button--set-min-width

Button Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing

button--set-max-width

This example uses tablesaw to stack data on smaller screens.

Example markup:

<table class="table tablesaw tablesaw-stack" data-tablesaw-mode="stack">...</table>

Aram Pattern Library | © GPMD Limited