TEST shortcodes

Buttons

Button types

Success btn

Danger btn

Warning btn

Button sizes

Extra small (xs) btn – color: primary

Small (sm) btn – color: secondary

Large (lg) btn – color: primary

Extra large (xl) btn- color: accent

Button flags

Block btn

Disabled btn

Fixed btn

Outlined btn

Plain btn

Rounded btn

Text btn

Tile btn

Other button props

Elevation

elevation 1

elevation 4

elevation 10

elevation 20

elevation 24

Link & target

Go to Google!

Rows & Columns

Example: Mobile and desktop

md="1"

md="8"

md="4"

md="6"

Example: Mobile, tablet, desktop

xs="12" sm="6" md="8"

xs="6" md="4"

xs="6" sm="4"

Offsetting columns

md="4"

md="4" offset_md="4"

md="3" offset_md="3"

md="6" offset_md="3"

Align options

Applies the align-items css property. Available options are start, center, end, baseline and stretch.

Note: generic and all breakpoints all also available! align, align_sm, align_md, align_lg, align_xl

align=”start”

Flex item

align=”center”

Flex item

align=”end”

Flex item

align=”baseline”

Flex item

align=”stretch”

Flex item

Align content options

Applies the align-content css property. Available options are start, center, end, space-between, space-around and stretch.

Note: generic and all breakpoints all also available! align_content, align_content_sm, align_content_md, align_content_lg, align_content_xl

align_content=”start”

Flex item

align_content=”center”

Flex item

align_content=”end”

Flex item

align_content=”space-between”

Flex item

align_content=”space-around”

Flex item

align_content=”stretch”

Flex item

Justify content options

Applies the justify-content css property. Available options are start, center, end, space-between and space-around.

Note: generic and all breakpoints all also available! justify, justify_sm, justify_md, justify_lg, justify_xl

justify=”start”

Flex item

justify=”center”

Flex item

justify=”end”

Flex item

justify=”space-between”

Flex item

justify=”space-around”

Flex item

Alerts

I’m an alert with a top border and red color

I’m an alert with a right border and blue-grey color

I’m an alert with a bottom border and pink color

I’m an alert with a left border and indigo color

Aliquam eu nunc. Fusce commodo aliquam arcu. In consectetuer turpis ut velit. Nulla facilisi..

Morbi mollis tellus ac sapien. Fusce vel dui. Praesent ut ligula non mi varius sagittis. Vivamus consectetuer hendrerit lacus. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vestibulum ullamcorper mauris at ligula. Nam pretium turpis et arcu. Ut varius tincidunt libero. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Morbi nec metus. Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Fusce commodo aliquam arcu. Pellentesque posuere. Phasellus tempus. Donec posuere vulputate arcu.

I’m a dense alert with a type of info

I’m a dense alert with the text prop and a type of success

I’m a dense alert with the border prop and a type of warning

I’m a dense alert with the outlined prop and a type of error

Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.

Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Collapsibles

Collapsibles with no flags

Panel 1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Panel 2