e.g. Page Heading, Section Heading, Product Carousel Heading
Paragraphs
Paragraph Body Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.
Etiam quis erat tincidunt, posuere mauris ut, bibendum massa. Nullam rhoncus, velit vitae posuere dapibus, lectus lorem
suscipit ligula, id convallis ex justo quis urna. This is a link within a paragraph. Morbi ullamcorper non arcu vel ornare. Integer elementum, erat et
bibendum tristique, neque dui sollicitudin risus, et facilisis felis augue vitae arcu. Maecenas ut mauris semper, gravida
ante a, viverra diam. Sed sed lectus at velit aliquet aliquet non rhoncus dui. Curabitur tristique lectus eros, in pulvinar
odio rhoncus nec. Pellentesque ornare lobortis velit, in sagittis metus ultricies id. Integer vitae pretium felis. Maecenas
dignissim gravida lacinia.
Font Family: Assistant Regular
Font Size: 14px
Line Height: 20px
Letter Spacing: 0.025em (default)
Lists
Unordered List
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 2 Ipsum dolor sit amet, consectetur adipiscing elit lorem.
Item 3 Dolor sit amet, consectetur adipiscing elit lorem ipsum.
Item 4 Sit amet, consectetur adipiscing elit lorem ipsum dolor.
.bulleted-list<ul class="list">
Default Font Specs: paragraph1
List Style Type: disc
Top Padding: 6px (to create a perceived line-height of 26px)
Ordered List
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 2 Ipsum dolor sit amet, consectetur adipiscing elit lorem.
Item 3 Dolor sit amet, consectetur adipiscing elit lorem ipsum.
Item 4 Sit amet, consectetur adipiscing elit lorem ipsum dolor.
.numbered-list<ol class="list">
Default Font Specs: paragraph1
List Style Type: decimal
Top Padding: 6px (to create a perceived line-height of 26px)
List Using Custom Markup
Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 2 Ipsum dolor sit amet, consectetur adipiscing elit lorem.
Item 3 Dolor sit amet, consectetur adipiscing elit lorem ipsum.
Item 4 Sit amet, consectetur adipiscing elit lorem ipsum dolor.
In the slick carousel init options, use variableWidth: true and set multiple breakpoints to control the number of dots visible at any given viewport. See styleguide.js "style-guide-caro4"
Small one-slide carousel
Tile (1)
Tile (2)
Tile (3)
Changes between light dots to dark dots responsively (at 768px) using the slick 'dotsClass' option.
below 768px: dotsClass: 'slick-dots light-dots',
above 768px: dotsClass: 'slick-dots',
Modal Dialogs
Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
The button below is added directly in the HTML <div>. Explicitly giving it a class name of "close-button' will make it function to close the dialog.
Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
The button below is added in JS. Assigning it a 'click' property value of function() {
$(this).dialog( "close" );
} will make it function to close the dialog.
The class dialogClass: 'dark-titlebar' can also be added to change the titlebar bg to black and the title text color (if a dynamic title exists) to white.
You could also achieve this with the added class of 'light-titlebar-text' to keep the titlebar background transparent.
Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
If you do not specify a title="" attribute in the dialog div, or a title: '', option in the dialog.open parameters object, no title will be rendered, which will effectively shift the body contents of the dialog up a few pixels to reduce the extra top-margin of having an empty (but existing) titlebar.
This dialog is assigned the property dialogClass: 'has-banner', which removes the built-in padding around the dialog content, and positions at the top, allowing a content banner image or other "full-bleed" images to be used. Note that the content banner should be given the class name "dialog-banner".
Inner content like paragraphs and buttons will need to be explicitly assigned paddings, margins, etc.
You can string classes together in this property as well, ex: 'has-banner light-titlebar-text'
To launch a lightbox from within a content asset, you can use the global classname open-lightbox, which will find the next instance of an element in the DOM with the classname of "lightbox" and open it into a jQuery dialog.
I'm a lightbox.
I'm a also lightbox, but I won't be opened, because I'm not the next div found in the DOM with class="lightbox".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa.
Tooltips should have the following markup.
Link should contain descriptive text.
The link's href should be href="#" with an attribute of aria-disabled="true" because the link doesn't take the user anywhere.
The tooltip content should have role="tooltip" to let non-visual users know that the content is in a tooltip.
The tooltip content should have a unique ID.
The link should reference that ID with the aria-describedby attribute to relate the tooltip content to the link that opens it.
The default styles for positioning the tooltip place the tooltip below the text, but the placement can be changed at the component level to meet the needs of individual components.
Box Style Divs with Carat Tips
Control which direction the peak is pointing with the mixin parameter $pointing. Accepted values are "up" (default if undefined), "down", "left", or "right".
Control the absolute positioning of the peak with mixin parameters $top, $bottom, $left, or $right.
Define the background color and borders with the parameters $bg-color and $borders.
There's a 7px padding applied to the inner content area by default, to account for any overlap with the peak shape.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa.
Example: @include carat-box($left: 33%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa.
Defaults to 100% width. Do not implicitly define this in the stylesheet, or it may override full-bleed styles (see below).
Hero Banner with Full-Bleed Width
CSS Hack to break a div out of a bounding container, as long as it is centered in the page (left/right margins and paddings are equal).
In ISML: class="full-bleed-width"
In SCSS: @extend %full-bleed-width;
In SCSS: @include full-bleed-width;
Content Asset Clasname-Driven Styling
Viewport visibility control via classname
desktop-only or desktopHidden below 768px
desktop-tabletHidden below 480px
tablet-onlyOnly visible from 480px to 767px
mobile or mobile-onlyHidden above 767px
Direct div positioning control
Using flex box
NOTE: These positioning styles only apply in the desktop viewport (768px and above). Mobile will always assume banner-text to be centered in the container.
banner-text
banner-text-center
banner-text-left
banner-text-right
banner-text-top
banner-text-bottom
Width control: just append '-25', '-33', '-50-', '-66', or '-75' to the end of the class name
NOTE: These width styles only apply in the desktop viewport (768px and above). Mobile will always assume banner-text to be full-width.
