Sizes

Size variables will be used to specify padding and margins. Examples outlined should be useful to designers to get an idea of the various consistent sizes that will be used uniformly thoughout the site.

Size-xxs Extra Extra Small Example

Here a margin right of size set on the red box.

This paragraph copy has of padding all around.

Size-xs Extra Small Example

Here a margin right of size set on the red box.

This paragraph copy has of padding all around.

Size-s Small Example

Here a margin right of size set on the red box.

This paragraph copy has of padding all around.

Size-m Medium Example

Here a margin right of size 1 set on the red box.

This paragraph copy has of padding all around.

Size-l Large Example

Here a margin right of size set on the red box.

This paragraph copy has of padding all around.

Size-xl Extra Large Example

Here a margin right of size set on the red box.

This paragraph copy has of padding all around.

Size-xxl Extra Extra Large Example

Here a margin right of size set on the red box.

This paragraph copy has of padding all around.