Colours
Primary Colours
Not accessible with white text
color-green
color-orange
color-blue
color-purple
Secondary Colours – accessible with white text
These can be both background colours with text on top and text colours
color-tourmaline
color-cinnabar
color-fluorite
color-amethyst
color-celestine
color-sodalite
Secondary Colours – not accessible with white text
These can be accent colours or background colours with dark text or no text
color-citrine
color-tourmaline-p1
color-cinnabar-p1
color-fluorite-p1
color-amethyst-p1
color-zircon-p1
color-celestine-p1
color-malachite
color-malachite-n1
color-peridot
color-coolmint
Greyscale
color-sylvite
color-gypsum
color-mica
color-corundum
color-chromite
color-galena
color-tungsten
color-ferrite
color-onyx
Typography
Header Class One
Header Class One Alternate
Header Class One Large Caps
Header Class One Large
Header Class One Large Bold
Header Class One 60
Header Class One Home
Header Class Two
Header Class Two Alternate
Header Class Three
Header Class Three Alternate
Header Class Four / Subhead
-
- font family: ARS Maquette Regular All Caps
- font size: 12px with 1px letter spacing
- colour: d2lGrey
This is the quotee, ARS Maquette at 26px with 42px leading
Body copy
Lists
List bullets will display theme colour
Check Mark List
- Integrate your solutions within Brightspace, the world’s first truly integrated learning platform
- Work with D2L to develop superior solutions together—solutions that will ultimately drive success for individual learners
- Deliver the right content at the right time with adaptive learning
Fancy List
- Add courses, content, or discussions with a single click
- Run online, blended, and CBE programs on the same platform
- Deliver the right content at the right time with adaptive learning
Bullet List
- Add courses, content, or discussions with a single click
- Run online, blended, and CBE programs on the same platform
- Deliver the right content at the right time with adaptive learning
Buttons
Helpful Classes
| Class | Description | Example |
| {colour}_bg | Set the background colour of an object | d2lWhite_bg |
| {colour}_txt | Set text colour | d2lWhite_txt |
| {colour}_brd(––top|right|bottom|left) | Set the border colour of an object (optional side variants) | d2lWhite_brd (All sides are white) d2lWhite_brd––top (Only top border is white) |
| no-[padding|margin](-x|y) | Remove all padding or margin (optional x or y) |
no-padding (Remove all padding or margin) no-padding-y (remove from top and bottom) |
| no-[padding|margin]-[top|right|bottom|left] | Remove padding or margin from a specific side | no-padding-top |
| [padding|margin]-[bottom|top](-2|3|4) | Add margin or padding to the top or bottom in increments of our base padding. | padding-bottom (add base padding to bottom) padding-bottom-2 (add 2 * base padding to bottom) |
| text-[viewportSize]-[left|center|right] | Align text based on the screen size. Class must be applied to the parent of the element you are trying to change the alignment of | text-center (smallest screen size and up) text-md-right (align right on md screen size and up) |
| hidden|visible | Hide or show an element | |
| hidden-[viewportSize]|visible-[viewportSize] | Hide or show an element on a specific viewport size | hidden-sm hidden-lg (hide on small and large viewport sizes, all other sizes xs, md and xl will be visible) |
| width-100 | Forces the element to have 100% width of it’s parent | |
| height-100 | Forces the element to have 100% height of it’s parent | |
| filter-grayscale | Converts images into grayscale, class must be placed directly on the image element | |
| img-[contain|cover] | Positions an image within the img tag while retaining scale. Cover will make the image fill the entire img element and contain will max out the image size along the X or Y axis, whichever side makes contact with the edge of the tag first |
|
| anchor-offset | Offsets the height of the main navigation for headings or elements with on-page anchors |
|
| rounded-corners | Rounds the corners of any element | |
| circle-image | Turns any image into a circle although the image must already be a perfect square to be a perfect circle |
|
| text-underline | Add an underline to any text | |
| no-list-style | Remove the default styling from a >ul< list | |
| no-line-break | Prevent the text inside from forcefully breaking on to the line below |
Flex Classes
Flex classes allow for special alignment of elements within the parent element that the flex classes are applied to.
| Class | Description | Example |
| flex | Enable flex on an element and it’s children. All other classes require the flex class to be present on the same element for flex to take effect. | |
| flex-wrap | Forces flex items (the elements contained within the element with the flex class present) onto multiple lines. Example | |
| flex-col | Display flex items in a column | |
| flex-row | Display flex items in a row | |
| justify-[center|evenly|around|between] | Align flex items horizontally |
justify-center justify-evenly justify-around justify-between |
| items-[center|evenly|around|between] | Align flex items horizontally |
items-start items-center items-end |
| flex-grow-1 | Forces the element to take up the remaining space of the parent flex container |
flex grow element
|
Image sizes
| Page Type | Width | Height |
| Curved hero | 1325 px | 400 px |
| Full width hero | 1440 px | 633 px |
| Blog post hero | 1325 px | 400 px |
| Full width background image | 1440 px | 633 px |
Breakpoint Examples
Carousel
<img class="alignnone size-full wp-image-133396" src="/wp-content/uploads/2016/03/SR-Awards-1.png" alt="SR-Awards" width="750" height="432" />
With updates to the Awards tool, you’ll enjoy better search functionality and improved templates for Certificates.
<img class="alignnone size-full wp-image-133408" src="/wp-content/uploads/2016/03/SR-DiscussRubric.png" alt="SR-DiscussRubric" width="750" height="432" />
Marking discussions will be faster than ever because you can now score a rubric at the same time that you are assessing a discussion post.
<img class="alignnone size-full wp-image-133390" src="/wp-content/uploads/2016/03/Homepage-with-widget.jpg" alt="Homepage-with-widget" width="738" height="425" />
The Course Overview widget in Brightspace Insights has been updated so that instructors can easily determine course access frequency.
With updates to the Awards tool, you’ll enjoy better search functionality and improved templates for Certificates.
Marking discussions will be faster than ever because you can now score a rubric at the same time that you are assessing a discussion post.
The Course Overview widget in Brightspace Insights has been updated so that instructors can easily determine course access frequency.
Pop ups
Useful Shortcodes
Video
Markup
Rows and Columns
Creating a Row
Creating a Column
Putting it together
John Baker
John founded D2L in 1999, at the age of twenty-two, while attending the University of Waterloo as a Systems Design Engineering student.
He saw that online digital tools could open the door to entirely new and more effective models, and create learning experiences that are more personal, engaging and inspiring. The company is on the journey of transforming the way the world learns.