Wilmington University Design System

Spacing, Margin & Padding

Adding the class .Section to any parent container will apply padding. This class should only be used on top level section elements on the page to apply left and right padding within the body and vertical padding between the sections. DO NOT apply this class to nested items.

You can easily add spacing between and within items. Adding the class .Gap10 on the parent container will add a gutter (similiar to margin) of 10px between each item. The number 10 in the class can be increased in increments of 10 with a max of 100. You can be more specific by using .ColumnGap10 or .RowGap10 to only add space between columns or rows.

Adding the class .Column-item to nested items will add padding to those items within a parent container.

The below example uses .Gap30 which gives 30px between each item, and .Column-item which adds 15px of padding to each item.

Class List

• .Section = adds 30px padding to the top and bottom of the container and 6vw padding left and right. This should only be used on all top level section containers within the body.
• .Section-noPadding = removes padding from the top and bottom of the container but still adds 6vw padding left and right. This should only be used on all top level section containers within the body.
• .NoPadding, .NoMargin = removes any padding or margin to the element.
• .Padding10, .Padding15, .Padding20, .Padding30, .Padding40, .Padding50 = adds padding to the element in pixels equal to the number in the class
• .Padding-right, .Padding-left = adds padding to the right or left of the element
• .Margin10, .Margin20, .Margin30, .Margin40, .Margin50 = adds top margin to the element in pixels equal to the number in the class
• .NoMargin, .NoPadding = will remove any margin or padding to the element
• .Gap10-.Gap100 = will add gutter between columns/rows to child elements in pixels equal to the number in the class. Increments of 10 only. Must be added to the parent container in order to effect the child elements.
• .RowGap10-.RowGap100 = will add gutter between rows only to child elements in pixels equal to the number in the class. Increments of 10 only. Must be added to the parent container in order to effect the child elements.
• .ColumnGap10-.ColumnGap100 = will add gutter between columns only to child elements in pixels equal to the number in the class. Increments of 10 only. Must be added to the parent container in order to effect the child elements.
• .Max100, .Max200, .Max300, .Max400, .Max500, .Max600, .Max700, .Max800, .Max900, .Max1000 = adds max width to an element

For more advanced margin or padding you will need to assign a separate class to specifically target the item.

Alignment

You can add classes to the parent container that will effect the alignment of all nested items within that container. The default alignment of items within a container is top left.

• .Columns-centerH - will center all items horizontally.
• .Columns-centerV - will center all items vertically.
• .Columns-center - will center all items horizontally and vertically.
• .Columns-left - will left align all items.
• .Columns-right - will right align all items.
• .Columns-top - will top align all items.
• .Columns-bottom - will bottom align all items.

You can add classes to individual items that will only effect that items alignment. The default alignment is top left. Alignment will effect the items, not the content within them. If you want to align text you will need to use one of the classes: .Text-left, .Text-center, or .Text-right.

• .Item-centerH - will center item horizontally.
• .Item-centerV - will center item vertically.
• .Item-center - will center item horizontally and vertically.
• .Item-left - will left align item.
• .Item-right - will right align item.
• .Item-top - will top align item.
• .Item-bottom - will bottom align item.