Styles

Lead Text

Borders

Border styles are managed in the Template Package 4.x framework using CSS classes. Elements can have no borders or display a border on the top, right, bottom, or left indepedently. Individual styles can be combined as needed to create "aggegrate" styles to achieve no borders or borders on all sides. The specific style and color options may vary by component. Borders are most often applied to Containers.

Key Value Classes

Margins and Padding

Margin is space outside of an element and Padding is space inside of an element (e.g. between the content and the border). Margin and Padding widths are managed in the Template Package 4.x framework using CSS classes and based on REM units of measurement. See Typography for details on Using REMs. Elements can have no margin or display margin or padding on the the top, right, bottom, or left sides of the element independently. Margin and Padding styles are used throughout Template Package 4.x, with m-3 and p-3 being the most commonly used. Individual styles can be combined as needed to create "aggegrate" styles. The specific styles may vary by component and are available as options for Containers.

Key Value Margin Classes Padding Classes

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:
  • m - for classes that set margin
  • p - for classes that set padding
Where sides is one of:
  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to
  • 2 - (by default) for classes that set the margin or padding to
  • 3 - (by default) for classes that set the margin or padding to
  • 4 - (by default) for classes that set the margin or padding to
  • 5 - (by default) for classes that set the margin or padding to

Positions

TODO

Separator Lines

  • Color: gray-medium, dotted
  • Margin: mt-1, mb-1

Shadows

TODO
View Page In: PDF [150k] DOC [150k]
Page last reviewed: