Groundwork Test: UI Elements

This page generates UI elements using classes and extends. Things are good when:

Elements appear as they should regardless of whether classes or extends are used.

Classes

Placeholders

.callout.

.extend-callout.extend-

.callout..active

.extend-callout.extend-.extend-active

.callout..disabled

.extend-callout.extend-.extend-disabled

.callout..small

.extend-callout.extend-.extend-small

.callout..large

.extend-callout.extend-.extend-large

.callout..square

.extend-callout.extend-.extend-square

.callout..round

.extend-callout.extend-.extend-round

.callout.info

.extend-callout.extend-info

.callout.info.active

.extend-callout.extend-info.extend-active

.callout.info.disabled

.extend-callout.extend-info.extend-disabled

.callout.info.small

.extend-callout.extend-info.extend-small

.callout.info.large

.extend-callout.extend-info.extend-large

.callout.info.square

.extend-callout.extend-info.extend-square

.callout.info.round

.extend-callout.extend-info.extend-round

.callout.alert

.extend-callout.extend-alert

.callout.alert.active

.extend-callout.extend-alert.extend-active

.callout.alert.disabled

.extend-callout.extend-alert.extend-disabled

.callout.alert.small

.extend-callout.extend-alert.extend-small

.callout.alert.large

.extend-callout.extend-alert.extend-large

.callout.alert.square

.extend-callout.extend-alert.extend-square

.callout.alert.round

.extend-callout.extend-alert.extend-round

.callout.warning

.extend-callout.extend-warning

.callout.warning.active

.extend-callout.extend-warning.extend-active

.callout.warning.disabled

.extend-callout.extend-warning.extend-disabled

.callout.warning.small

.extend-callout.extend-warning.extend-small

.callout.warning.large

.extend-callout.extend-warning.extend-large

.callout.warning.square

.extend-callout.extend-warning.extend-square

.callout.warning.round

.extend-callout.extend-warning.extend-round

.callout.error

.extend-callout.extend-error

.callout.error.active

.extend-callout.extend-error.extend-active

.callout.error.disabled

.extend-callout.extend-error.extend-disabled

.callout.error.small

.extend-callout.extend-error.extend-small

.callout.error.large

.extend-callout.extend-error.extend-large

.callout.error.square

.extend-callout.extend-error.extend-square

.callout.error.round

.extend-callout.extend-error.extend-round

.callout.success

.extend-callout.extend-success

.callout.success.active

.extend-callout.extend-success.extend-active

.callout.success.disabled

.extend-callout.extend-success.extend-disabled

.callout.success.small

.extend-callout.extend-success.extend-small

.callout.success.large

.extend-callout.extend-success.extend-large

.callout.success.square

.extend-callout.extend-success.extend-square

.callout.success.round

.extend-callout.extend-success.extend-round

.message.

.extend-message.extend-

.message..active

.extend-message.extend-.extend-active

.message..disabled

.extend-message.extend-.extend-disabled

.message..small

.extend-message.extend-.extend-small

.message..large

.extend-message.extend-.extend-large

.message..square

.extend-message.extend-.extend-square

.message..round

.extend-message.extend-.extend-round

.message.info

.extend-message.extend-info

.message.info.active

.extend-message.extend-info.extend-active

.message.info.disabled

.extend-message.extend-info.extend-disabled

.message.info.small

.extend-message.extend-info.extend-small

.message.info.large

.extend-message.extend-info.extend-large

.message.info.square

.extend-message.extend-info.extend-square

.message.info.round

.extend-message.extend-info.extend-round

.message.alert

.extend-message.extend-alert

.message.alert.active

.extend-message.extend-alert.extend-active

.message.alert.disabled

.extend-message.extend-alert.extend-disabled

.message.alert.small

.extend-message.extend-alert.extend-small

.message.alert.large

.extend-message.extend-alert.extend-large

.message.alert.square

.extend-message.extend-alert.extend-square

.message.alert.round

.extend-message.extend-alert.extend-round

.message.warning

.extend-message.extend-warning

.message.warning.active

.extend-message.extend-warning.extend-active

.message.warning.disabled

.extend-message.extend-warning.extend-disabled

.message.warning.small

.extend-message.extend-warning.extend-small

.message.warning.large

.extend-message.extend-warning.extend-large

.message.warning.square

.extend-message.extend-warning.extend-square

.message.warning.round

.extend-message.extend-warning.extend-round

.message.error

.extend-message.extend-error

.message.error.active

.extend-message.extend-error.extend-active

.message.error.disabled

.extend-message.extend-error.extend-disabled

.message.error.small

.extend-message.extend-error.extend-small

.message.error.large

.extend-message.extend-error.extend-large

.message.error.square

.extend-message.extend-error.extend-square

.message.error.round

.extend-message.extend-error.extend-round

.message.success

.extend-message.extend-success

.message.success.active

.extend-message.extend-success.extend-active

.message.success.disabled

.extend-message.extend-success.extend-disabled

.message.success.small

.extend-message.extend-success.extend-small

.message.success.large

.extend-message.extend-success.extend-large

.message.success.square

.extend-message.extend-success.extend-square

.message.success.round

.extend-message.extend-success.extend-round