By default a .Grid-cell is 100% of the .Grid.
.Grid-cells will wrap if their combined width is greater than 100%.
.Grid-cell width can be set using Size Utilities.
.Grids can be nested. By default each consecutive .Grid holds its padding.
Not adding the .Grid-cell element will ensure the nested .Grid-cell adheres to the padding of the parent .Grid-cell
By default, .Grid-cells are left aligned and the same is true for the content inside of them.
We have 4 predetermined breakpoints, creating 5 different screen size ranges. Default, Small, Medium, Large and X-Large.
Default
up to 535px wide
Small -sm
536-765px wide
Medium -md
766-980px wide
Large -lg
981-1300px wide
X-Large -xl
1301-1600px wide
sizeXof2
It should be noted that you don’t have to base size off of a 12-column grid. The Digital Design System will accept any size ratio. See code snippet.
Examples:
.u-size1of2
.u-size4of10
.u-size3of6
etc…
Helpful hint
Avoid using .u-size2of2 or .u-size12of12. These classes do not do anything and will be ignored. To make something full width see SizeFull.
The Offset classes are used to push a cell to the left or right with margins using the same familiar column widths. Options include .xof2, .xof3, .xof4, .xof5, .xof6, .xof8, .xof10, .xof12 with an option to use the -sm-, -md, -lg and -xl breakpoint prefixes.
While the Offset classes can be used to center one or more cells, using the .Grid-cell—centered modifier is cleaner with fewer classes to override.
Helpful hint
Many times you need to change your layout based on device. You can do this by utilizing media-query modifiers with .Size.
In order to do this just add -sm, -md, -lg or -xl before size.
Mobile first
The Digital Design System is architected using a mobile first mentality. Therefore you just need to add the size modifier when you want that layout to begin.
Example:
.u-lg-size1of2This will make the item full width until it reaches the -lg breakpoint. At this point it will split into a 50% layout.Sometimes you need to be able to override a Size set at a smaller viewport. This is when you should utilize .SizeFull.
Example:
.u-size1of2 .u-lg-sizeFull
This will make the item 50% until it reaches the -lg breakpoint. At this point it will return to a 100% layout.
Helpful hint
Avoid using .SizeFull where it is not needed.
Example:
class="u-sizeFull u-lg-size3of4"
.SizeFull is unnecessary because by default .Size is 100% until it reaches a size modifier.
Sometimes you want a container-type element to have a set width and height and the content next to it to flex based on viewport size. This is when .SizeFit and .SizeFull are helpful.
Apply the .u-sizeFit class to the container that will have the set width. This width will be determined by the .u-sizeFit element’s children, which should have set widths (such as images or icons). Apply .u-sizeFill to the other element which will flex its width accordingly.
Helpful hint
Avoid setting too many fixed width containers.
.u-cf forces content after floated elements or a container containing floated elements to render below it.
The float property allows side-by-side block-level elements but they do not take the shape of the container.
Using .u-cf will make the content or the container “wrap” around the floated elements.
By default all backgrounds will be White.
Sometimes it is necessary to use color to break up content or give something a container. In these cases, GrayLightest or Sand can be used.
In rare occasions Blue or TealDark can be used as a background color.
White
#FFFFFF
GrayLightest
#F7F7F7
Sand
#FFFBF2
Blue
#105FA8
TealDark
#03746E
We design and build with accessibility in mind. Color contrast for text and buttons must meet WCAG Level AA standards. Contrast can be calculated for different color combinations using the WebAIM Color Contrast Checker.
Acceptable colors
BlueDark |
BlueDark |
Pass |
Blue |
Blue |
Pass |
TealDark |
TealDark |
Pass |
GrayDarkest |
GrayDarkest |
Pass |
GrayDarker |
GrayDarker |
Pass |
GrayDark |
GrayDark |
Pass |
Gray |
Gray |
Pass* |
GrayLight |
GrayLight |
Fail |
GrayLighter |
GrayLighter |
Fail |
GrayLightest |
GrayLightest |
Fail |
* Passes, but only for text that is above 24px.
Our corporate typeface is Source Sans Pro. We use four weights: light (h1 only), regular, semibold and occasionally bold.
All text elements use a base-10 rem (root em) as the default form of size measurement with a px (pixel) fallback. 1rem = 10px. Our type styles have been designed using a modified 1.25 scale to create a clear hierarchy between different pieces of text. Each style has a defined size for small and large screens. Line-heights and margins have been built to fall upon our 4px baseline grid.
As a fallback we use Helvetica.
You will need to add the following code snippet to the head block on your page for the font to load. The script tag version supports better asynchronicity.
We strive to set paragraph text at an ideal line length of 55-85 characters per line (CPL). This translates to body copy set within a 430-675px wide area on a large-screen device. Lines of text that are much longer or shorter can become difficult for users to read – especially with paragraphs or multiple lines of text.
Headings
There are six primary types of headings available through the standard header HTML tags.
For SEO every page should have only one h1. After that it is important to follow semantic order. If you were to turn off CSS the page should read like an easy to understand outline.
Be consistent in the usage of headers across pages.
Writing headings
H1 headings should be written in title case. H2-H6 headings should be written in sentence case.
Body copy and smaller styles
Body copy can be set using paragraph <p> style.
Small text is used for supporting text, such as captions and other secondary copy. It should not be used as the primary body copy size.
Smaller text should be used only for disclaimers or short amounts of copy.
Helpful hints
Various weights can be applied to Source Sans Pro using the following classes:
.u-fontWeight300
.u-fontWeight400
.u-fontWeight600
.u-fontWeight700
Helpful hints
To create a link to a URL, apply an anchor tag around the applicable text.
If the attribute target has the value “_blank”, an icon will be added after the linked text to indicate to the user that they will be leaving the current site.
Basic text formatting
Formatting can be added to text to call attention, add emphasis, and enhance the meaning of important content.
To denote important text, use an HTML strong tag.To bold key words, use an HTML b tag.
To emphasize text, use an HTML em tag.
To italicize text, use an HTML i tag.
To underline text, apply the class u-fontUnderline.
To make a word uppercase, apply the class u-textCaps.
Helpful hints
Text wrapping and truncating
Text formatting can also be used to keep words together on the same line or let users know that there is more text than they are seeing on the page.
To prevent text from wrapping to another line, apply the class u-textNoWrap.
To truncate text, apply the class u-textTruncate to a block element. This will truncate the text based on the width of the parent container.
Use unordered lists to indicate a list of things that does not have any sequential dependency.
Use ordered lists for sequential items.
Helpful hints
- First, do this thing
- Next, do this thing
- Finally, do this last thing
- First, do this thing
- Next, do this thing
- Finally, do this last thing
Text can be aligned left, right, or centered.
.u-textLeft class applies left alignment
.u-textRight applies right alignment
.u-textCenter applies center alignment.
These classes can also be triggered in regard to the responsive layout by adding the -sm, -md, -lg suffixes to the class names.
Responsive sizes also available (-sm, -md, -lg).
Helpful hints
Margin and padding work together to create space in a layout. Space can be very important for user understanding and can give a certain feeling to a layout.
We calculate spacing in multiples of 4. This gives our designs a consistent baseline and grid while being flexible enough to be used on different kinds of designs and layouts. Be consistent on the amount of spacing you use throughout your project.
For example, use the same amount of space between content sections on every page of a website.
Components and typography in the design system have been built using the 4px baseline grid.
The Space classes add margin and padding to an element. Space classes follow a pattern
.u-[sm/md/lg/xl-][m/p][T/B/L/R/V/H/A][0/1-25]
Which allows for breakpoint, property, direction and width of property.
Helpful hint
Keep all Space classes near each other in the code and in their breakpoint order. This helps to visually understand the spacing properties and at what breakpoints they are being added to an element.
We use rounded corners to help provide a sense of approachability and friendliness to our materials.
For small items such as buttons and input boxes, we use a 6px radius on all corners.
For larger items such as a call out box or card, we use a 8px radius on all corners.
Helpful hints
Do use rounded corners on these items:
- Cards
- Buttons
- Outlined input boxes
- Call out boxes
- Modals and overlays
- Hero title boxes
Don't use rounded corners on these items:
- Photo boxes
- Data tables
- Menu and dropdowns
You can use the breakpoint prefixes (-sm -md -lg -xl) to adjust the display property at certain screen sizes.
The alignment classes set the alignment elements. There are four alignment options: .u-alignBaseline, .u-alignBottom, .u-alignMiddle and .u-alignTop
Note: The alignment classes will only work on inline-block or on a table row element.