{"overview":{"name":"Overview","category":"overview","description":"Build consistent, responsive, mobile-first, HTML5/CSS3 interfaces for your Cisco CTG web applications and sites.","children":[{}]},"develop":{"name":"Develop","category":"develop","description":"","children":[{"name":"Changelog","component":"changelog","description":"All notable changes to this project will be documented here, using Semantic Versioning."},{"name":"Contributing","component":"contributing","description":"We would love for you to contribute to Collab UI and help make it ever better! "},{"name":"Getting Started","component":"getting-started","description":"Get started building responsive, mobile-first applications and sites."},{"name":"Roadmap","component":"roadmap","description":"The Roadmap aims to expose what current is and what future work will be tackled in Collab UI. Explore the items below and follow them on to Github for more details and to join the conversation to promote or explore these or other items."}]},"styles":{"name":"Styles","category":"styles","description":"","children":[{"name":"Colors","component":"colors","description":"SCSS variables for the colors in the design system"},{"name":"Icons","component":"icon","description":"Icons are visual signs that help us make sense of the world around us."},{"name":"Typography","component":"typography","description":"Convey the importance of your words with the correct hierarchy.","sections":[{"name":"Headings","section":"default","description":"All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.","category":"styles","component":"typography","variations":{"html":[{"example":"
","escaped":" <div class=\"row\">\n <div class=\"columns medium-12\">\n <h1 class=\"__web-inspector-hide-shortcut__\">h1. Example heading <small>Secondary text</small></h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h2>h2. Example heading <small>Secondary text</small></h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h3>h3. Example heading <small>Secondary text</small></h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h4>h4. Example heading <small>Secondary text</small></h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h5>h5. Example heading <small>Secondary text</small></h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h6>h6. Example heading <small>Secondary text</small></h6>\n </div>\n </div>"}]},"core":true},{"name":"Body Copy","section":"body","description":"Collab UI's global default font-size is 16px (1rem), with a line-height of 1.4. Paragraphs default font-size is 14px (0.875rem). In addition, <p> (paragraphs) receive a bottom margin of 16px (1rem by default).","category":"styles","component":"typography","variations":{"html":[{"example":"
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
\n
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
\n
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
","escaped":" <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>\n <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>\n <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>"}]},"examples":{"html":[{"example":"
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
\n
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
\n
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
","escaped":" <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>\n <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>\n <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>"}]},"core":true},{"name":"Lead Copy","section":"lead-body","description":"Make a paragraph stand out by adding .lead.","category":"styles","component":"typography","variations":{"html":[{"example":"
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
","escaped":" <p class=\"lead\">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>"}]},"examples":{"html":[{"example":"
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
","escaped":" <p class=\"lead\">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>"}]},"core":true},{"name":"Small text","section":"small-text","description":"For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.
You may alternatively use an inline element with .small in place of any <small>.","category":"styles","component":"typography","variations":{"html":[{"example":" This line of text is meant to be treated as fine print.","escaped":" <small>This line of text is meant to be treated as fine print.</small>"}]},"examples":{"html":[{"example":" This line of text is meant to be treated as fine print.","escaped":" <small>This line of text is meant to be treated as fine print.</small>"}]},"core":true},{"name":"Bold","section":"bold","description":"For emphasizing a snippet of text with a heavier font-weight by using the <strong> html tag.","category":"styles","component":"typography","variations":{"html":[{"example":"
The following snippet of text is rendered as bold text.
","escaped":" <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>"}]},"examples":{"html":[{"example":"
The following snippet of text is rendered as bold text.
","escaped":" <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>"}]},"core":true},{"name":"Italics","section":"italics","description":"For emphasizing a snippet of text with italics by using the <em> html tag.","category":"styles","component":"typography","variations":{"html":[{"example":"
The following snippet of text is rendered as italicized text.
","escaped":" <p>The following snippet of text is <em>rendered as italicized text</em>.</p>"}]},"examples":{"html":[{"example":"
The following snippet of text is rendered as italicized text.
","escaped":" <p>The following snippet of text is <em>rendered as italicized text</em>.</p>"}]},"core":true},{"name":"Alignment classes","section":"alignment-classes","description":"Easily realign text to components with text alignment classes.","category":"styles","component":"typography","variations":{"html":[{"example":"
Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
","escaped":" <p class=\"text-left\">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-center\">Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-right\">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-justify\">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"}]},"examples":{"html":[{"example":"
Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
","escaped":" <p class=\"text-left\">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-center\">Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-right\">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-justify\">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"}]},"core":true},{"name":"Links","section":"links","description":"Links are very standard, and the color is preset to the Collab UI primary color. To make links screen reader-friendly, avoid using vague words like \"here\" or \"read more\" within link text. The text of the link itself should adequately describe where the link goes.","category":"styles","component":"typography","variations":{"html":[{"example":"
","escaped":" <p><a href=\"/styles/colors\">Learn more about Collab UI's global colors.</a></p>"}]},"core":true}]},{"name":"Sass","component":"sass","description":"Behind the scenes, Collab UI is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.","sections":[{"name":"Sass Variables","section":"variables","description":"Use the Collab UI Variables throughout your application Sass files to create consistent, good lookiing apps.","category":"styles","component":"sass","variations":{},"examples":{},"core":true},{"name":"Sass Mixins","section":"mixins","description":"Collab UI uses these mixins to build the final CSS output of each component. You can use the mixins yourself to build your own class structure out of our components."},{"name":"Sass Functions","section":"functions","description":"Use the Collab UI functions throughout your application Sass files to create consistent, good lookiing apps."}]}]},"layout":{"name":"Layout","category":"layout","description":"","children":[{"name":"Accordion","component":"accordion","description":"Accordion enables users to expand and collapse sections of content.","sections":[{"name":"Accordion","section":"multi-open","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Multiple Open","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Pre Selected Open","section":"pre-selected-open","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Collapse","component":"collapse","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Collapse","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Data Grids","component":"data-grid","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Tables","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Striped Rows","section":"striped-rows","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Bordered","section":"bordered","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Hover Rows","section":"hover-rows","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Condensed","section":"condensed","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Footer","component":"footer","description":"footer component","sections":[{"name":"Footer","section":"default","description":"footer component description"}]},{"name":"Layout Grid","component":"layout-grid","description":"Create powerful multi-device layouts quickly and easily with the default 12-column, nestable grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.","sections":[{"name":"Basic Grid","section":"default","description":"Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes. Collab UI is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":"<div class=\"row\">\n <div class=\"small-2 columns\">2 columns</div>\n <div class=\"small-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"small-3 columns\">3 columns</div>\n <div class=\"small-9 columns\">9 columns</div>\n</div>"}]},"core":true},{"name":"Medium Grid","section":"medium","description":"Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":"<div class=\"row\">\n <div class=\"medium-2 columns\">2 columns</div>\n <div class=\"medium-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-3 columns\">3 columns</div>\n <div class=\"medium-9 columns\">9 columns</div>\n</div>"}]},"core":true},{"name":"Advanced","section":"advanced","description":"You can nest the grids indefinitely, though at a certain point it will get absurd.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":"<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-11 columns\">11</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-10 large-offset-1 columns\">10, offset 1</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-9 large-offset-2 columns\">9, offset 2</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-8 large-offset-3 columns\">8, offset 3</div>\n</div>"}]},"core":true},{"name":"Incomplete Rows","section":"incomplete","description":"In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":"<div class=\"row\">\n <div class=\"medium-3 columns\">3</div>\n <div class=\"medium-3 columns\">3</div>\n <div class=\"medium-3 columns\">3</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-3 columns\">3</div>\n <div class=\"medium-3 columns\">3</div>\n <div class=\"medium-3 columns end\">3 end</div>\n</div>"}]},"core":true},{"name":"Collapse/Uncollapse Rows","section":"collapse-uncollapse","description":"The collapse class lets you remove column gutters (padding). There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
\n
\n Removes gutter at large media query\n
\n
\n Removes gutter at large media query\n
\n
","escaped":"<div class=\"row medium-uncollapse large-collapse\">\n <div class=\"small-6 columns\">\n Removes gutter at large media query\n </div>\n <div class=\"small-6 columns\">\n Removes gutter at large media query\n </div>\n</div>"}]},"examples":{"html":[{"example":"
\n
\n Removes gutter at large media query\n
\n
\n Removes gutter at large media query\n
\n
","escaped":"<div class=\"row medium-uncollapse large-collapse\">\n <div class=\"small-6 columns\">\n Removes gutter at large media query\n </div>\n <div class=\"small-6 columns\">\n Removes gutter at large media query\n </div>\n</div>"}]},"core":true},{"name":"Centered Columns","section":"centered","description":"Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":"<div class=\"row\">\n <div class=\"small-3 small-centered columns\">3 centered</div>\n</div>\n<div class=\"row\">\n <div class=\"small-6 large-centered columns\">6 centered</div>\n</div>\n<div class=\"row\">\n <div class=\"small-9 small-centered large-uncentered columns\">9 centered</div>\n</div>\n<div class=\"row\">\n <div class=\"small-11 small-centered columns\">11 centered</div>\n</div>"}]},"core":true},{"name":"Source Ordering","section":"source-ordering","description":"Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":"<div class=\"row\">\n <div class=\"small-10 small-push-2 columns\">10</div>\n <div class=\"small-2 small-pull-10 columns\">2, last</div>\n</div>\n<div class=\"row\">\n <div class=\"large-9 large-push-3 columns\">9</div>\n <div class=\"large-3 large-pull-9 columns\">3, last</div>\n</div>\n<div class=\"row\">\n <div class=\"large-8 large-push-4 columns\">8</div>\n <div class=\"large-4 large-pull-8 columns\">4, last</div>\n</div>\n<div class=\"row\">\n <div class=\"small-5 small-push-7 medium-7 medium-push-5 columns\">7</div>\n <div class=\"small-7 small-pull-5 medium-5 medium-pull-7 columns\">5, last</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-6 medium-push-6 columns\">6</div>\n <div class=\"medium-6 medium-pull-6 columns\">6, last</div>\n</div>"}]},"core":true},{"name":"Block Grid","section":"block-grid","description":"Block grids give you a way to evenly split contents of a list within the grid. Use the bock grid if you want to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size.
If you would like to collapse the padding for child elements with the block grid use the .collapse class.
You may use other element types as long as the siblings are the same. Use the .{small|medium|large}-block-grid-* modifier classes.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":" <div class=\"row\">\n <div class=\"small-12 columns small-block-grid-3\">\n <p>first</p>\n <p>second</p>\n <p>third</p>\n </div>\n </div>"}]},"core":true},{"name":"Complex","section":"complex","description":"The combination of static and dynamic grid types allows for complex responsive layouts. The example below uses a combination of columns and the block grid.
In the example below.{small|medium|large}-block-grid-*,.{small|medium|large}-*and.collapseclasses were used together.
The objective is to give focus to specific content areas on large screens and variable columns sizes on small and medium screens to maintain focus and readability. (resize your browser).","category":"layout","component":"layout-grid","variations":{"html":[{"example":"
","escaped":" <div class=\"row\">\n <div class=\"columns medium-9\">.medium-9</div>\n <div class=\"columns medium-3\">.medium-3</div>\n <div class=\"columns small-12\">\n <div class=\"row collapse\">\n <h5 class=\"small columns small-12 text-right\">.small-12 .{small|medium|large}-block-grid-* collapse</h5>\n <div class=\"small-12 columns small-block-grid-2 medium-block-grid-3 large-block-grid-6 collapse\">\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=1st%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=2nd%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=3rd%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=4th%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=5th%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=6th%20image&w=200&h=200\"/>\n </div>\n </div>\n <div class=\"small-12 columns small-block-grid-2 medium-block-grid-3 collapse\">\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=7th%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=8th%20image&w=200&h=200\"/>\n </div>\n <div class=\"\">\n <img src=\"https://placeholdit.imgix.net/~text?txtsize=33&txt=9th%20image&w=200&h=200\"/>\n </div>\n </div>\n </div>\n </div>\n </div>"}]},"core":true}]},{"name":"Overlay Panel","component":"overlay-panel","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Overlay Panel","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Page Header","component":"page-header","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Page Layouts","component":"page-layouts","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Page Sub Header","component":"page-sub-header","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Default","section":"default","description":"Page sub header will transclude content in the left and right directives."},{"name":"Tabs","section":"tabs","description":"Add tabs to the to generate nav tabs instead of transcluding."}]},{"name":"Search Filter","component":"search-filter","description":"Search enables users to specify a word or a phrase to find particular relevant pieces of content without the use of navigation. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.","sections":[{"name":"Search Filter","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Setup Assistant","component":"setup-assistant","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Side Bar","component":"side-bar","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Side Panel","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dynamic Breadcrumbs","section":"dynamic-breadcrumbs","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Side Nav","component":"side-nav","description":"Side navigation","sections":[{"name":"Side Nav","section":"default","description":"side navigation component"},{"name":"Side Nav with collapse effect","section":"expand","description":"side navigation component"},{"name":"Nested Side Nav with collapse effect","section":"nested","description":"side navigation component"},{"name":"Full Side Nav","section":"full","description":"side navigation component"}]},{"name":"Side Panel","component":"side-panel","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Tabs","component":"tabs","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Horizontal Pills","section":"horizontal-pills","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Horizontal Justifed Pills","section":"horizontal-pills-justified","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Top Bar","component":"top-bar","description":"Application or site header for web applications and content sites.","sections":[{"name":"Default Top Bar","section":"default","description":"Application or site header for web applications and content sites.","category":"layout","component":"top-bar","variations":{"html":[{"example":"\n
","escaped":" <ul class=\"cui-breadcrumbs\">\n <li class=\"current\">Home</li>\n </ul>\n <ul class=\"cui-breadcrumbs\">\n <li><a href=\"javascript:void(0)\">Home</a></li>\n <li class=\"current\"><a>Library</a></li>\n </ul>\n <ul class=\"cui-breadcrumbs\">\n <li><a href=\"javascript:void(0)\">Home</a></li>\n <li><a href=\"javascript:void(0)\">Library</a></li>\n <li class=\"current\">Data</li>\n </ul>"}]},"core":true}]},{"name":"Drop Down","component":"drop-down","description":"A dropdown allows users to select one option from a list."},{"name":"Pagination","component":"pagination","description":"Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.","sections":[{"name":"Pagination","section":"default","description":"A pagination list is just a <ul> with the class .pagination, and a series of <li>/<a> pairs. Add the class .current to an <li> to mark the current page, or .disabled to add disabled styles to a link."},{"name":"Pagination","section":"centered","description":"The items in a pagination list are display: inline-block, which makes centering them easy. Use our built-in .text-center class, or add text-align: center in your CSS."}]},{"name":"Top Navigation","component":"top-nav","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Side Navigation","component":"side-nav","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},"containers":{"name":"Containers","category":"containers","description":"","children":[{"name":"Button Group","component":"button-group","description":"Button Group provides styling to group buttons","sections":[{"name":"Default Button Group","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Button Groups used in SpaceList","section":"dark","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Button Groups with highlightSelected=false","section":"highlightSelected","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Icons within Button Group","section":"icons","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Button Groups with justified false","section":"justified","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Content Item","component":"content-item","description":"Content Item provides file container","sections":[{"name":"Content Item","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Content Item used in File View","section":"file","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Content Item Spinner","section":"spinner","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Content Item with different size","section":"size","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Finding aspect with image Width and Height Prop","section":"aspect","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Failed to Load Content","section":"failed","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Icon File View","section":"icon","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Cards","component":"card","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Cards","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Card with Name & Close Icon","section":"name-close","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Card with Checkbox Sublist","section":"checkbox","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Card with Radio Sublist","section":"radio","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Block Layout","section":"block","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Header","section":"header","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Header Border","section":"header-border","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Header Background","section":"header-background","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Header Background Color","section":"header-background-color","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Header Bar","section":"header-bar","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Header Alignment","section":"header-alignment","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Without Header","section":"without-header","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Section Background","section":"section-background","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Section Content","section":"section-content","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Cards Images","section":"images","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Cards with Menu","section":"menu","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Configure Service Card","section":"service","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Cards Separated on Page","section":"separated","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Cards Overview Page Example","section":"overview","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Chips","component":"chip","description":"Chips are added to the activity stream to give more context on special activites. Recordings and Files mainly","sections":[{"name":"Recording Chip","section":"recording","description":"Renders a recording chip"},{"name":"File Chip","section":"file","description":"Shows a file chip. Requires the type and fileType props to render the correct file icon"}]},{"name":"Dialogs","component":"dialog","description":"Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks."},{"name":"Lightbox","component":"lightbox","description":"LightBox component is used to view the files in fullscreen.","sections":[{"name":"LightBox with one page","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"LightBox with multiple page","section":"multiple","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Lists","component":"list-item","description":"An element that can be used to create lists within selects or dropdowns.","sections":[{"name":"List Item States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","category":"containers","component":"list-item","variations":{"html":[{"example":"
","escaped":" <div class=\"list-states cui--dark cui--contrast\">\n <div class=\"row default-state\">\n <div class=\"medium-12 row\">\n <div class=\"medium-6 columns\">\n <h4 class=\"text-center\">Normal Contrast</h4>\n <div class=\"cui-list cui-list--vertical\" style=\"background-color:rgba(40,40,40,0.72);\">\n <div class=\"cui-list-item\">\n <div class=\"cui-list-item__left\">\n <div class=\"cui-avatar\">\n <span class=\"cui-avatar__letter\">M</span>\n </div>\n </div>\n <div class=\"cui-list-item__center\">Normal Contrast</div>\n </div>\n <div class=\"cui-list-item hover\">\n <div class=\"cui-list-item__left\">\n <div class=\"cui-avatar\">\n <span class=\"cui-avatar__letter\">M</span>\n </div>\n </div>\n <div class=\"cui-list-item__center\">Hover Contrast</div>\n </div>\n <div class=\"cui-list-item active\">\n <div class=\"cui-list-item__left\">\n <div class=\"cui-avatar\">\n <span class=\"cui-avatar__letter\">M</span>\n </div>\n </div>\n <div class=\"cui-list-item__center\">Pressed</div>\n </div>\n <div class=\"cui-list-item focus\">\n <div class=\"cui-list-item__left\">\n <div class=\"cui-avatar\">\n <span class=\"cui-avatar__letter\">M</span>\n </div>\n </div>\n <div class=\"cui-list-item__center\">Focus</div>\n </div>\n <div class=\"cui-list-item disabled\">\n <div class=\"cui-list-item__left\">\n <div class=\"cui-avatar\">\n <span class=\"cui-avatar__letter\">M</span>\n </div>\n </div>\n <div class=\"cui-list-item__center\">Disabled</div>\n </div>\n <div class=\"cui-list-item\">\n <div class=\"cui-list-item__left\">\n <div class=\"cui-avatar\">\n <div class=\"cui-avatar__letter\">UI</div>\n </div>\n </div>\n <div class=\"cui-list-item__center\">\n <div class=\"cui-list-item__header\">Normal</div>\n <div class=\"cui-list-item__subheader\">Subheader</div>\n </div>\n </div>\n <div class=\"cui-list-item\">\n <div class=\"cui-list-item__left\">\n <div class=\"icon icon-record_20\"></div>\n </div>\n <div class=\"cui-list-item__center\">Normal Icon</div>\n </div>\n </div>\n </div>\n </div>\n </div>"}]},"hidecode":"true","core":true},{"name":"Space List Item","section":"space-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Space List Contrast Item","section":"space-contrast-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Default","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Type","section":"type","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Tab Type","section":"tab-type","description":"Renders list horizontally"},{"name":"List Item Sections","section":"list-item-sections","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Custom Anchor","section":"custom-anchor","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Space List","section":"space","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"List Item Header","section":"header","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Space List Meeting","section":"space-meeting","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"List Item Meeting","section":"list-item-meeting","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Menu Overlay","component":"menu-overlay","description":"Menu Overlay can be used to display simple/nested Menus within a Popover","sections":[{"name":"Menu Overlay","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Message Boxes","component":"message-box","description":"Message boxes are used for things like 404 messages and unauthorized.\n NOTE: You have to set the background image in the application css or there will be no background.\n
\n \n .messagebox {\n background-image: 'url to the image';\n }\n
\n ","sections":[{"name":"Default - Warning/Error","section":"default","description":"Message boxes are used for things like 404 messages and unauthorized.","category":"containers","component":"message-box","variations":{"html":[{"example":"
\n
\n
\n \n
Not Found
\n
Sorry, but the page you were trying to view does not exist.
","escaped":" <div class=\"docs-example docs-example--spacing\">\n <button type=\"button\" class=\"cui-button\">Button</button>\n </div>"}]},"core":true},{"name":"Large Buttons","section":"large","description":"Create large buttons by adding the .cui-button--large class to the button element.","category":"controls","component":"button","variations":{"html":[{"example":"
","escaped":" <div class=\"docs-example docs-example--spacing\">\n <button type=\"button\" class=\"cui-button cui-button--large\">Large Button</button>\n </div>"}]},"core":true},{"name":"Expanded Buttons","section":"expanded","description":"Create block level buttons —those that span the full width of a parent— by adding .cui-button--expand.","category":"controls","component":"button","variations":{"html":[{"example":"
","escaped":"<div class=\"well\" style=\"max-width: 600px; margin: 0 auto 10px;\">\n <div class=\"docs-example docs-example--spacing\">\n <button type=\"button\" class=\"cui-button cui-button--expand\">Expanded button</button>\n </div>\n</div>"}]},"core":true},{"name":"Disabled Buttons","section":"disabled","description":"Make buttons look unclickable by fading them back with opacity. Add the disabled attribute to <button> buttons and add the .cui-button--disabled class to <a> buttons.","category":"controls","component":"button","variations":{"html":[{"example":"
","escaped":"<div class=\"docs-example docs-example--spacing\">\n <button type=\"button\" class=\"cui-button\" disabled=\"disabled\">Disabled <button></button>\n <a href=\"javascript:void(0)\" class=\"cui-button cui-button--disabled\">Disabled <a></a>\n</div>"}]},"core":true},{"name":"Loading Buttons","section":"loading","description":"Change the State of Button to loading","category":"controls","component":"button","variations":{"html":[{"example":"
","escaped":" <div class=\"checkbox-states medium-4 columns cui--client\">\n <h3>Light</h3>\n <h5><code>.cui-checkbox<br> .cui-input--filled</code></h5>\n <div class=\"checkbox-states\">\n <div class=\"disabled-unchecked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" disabled>\n <label class=\"cui-checkbox__label\">\n <span>Disabled & Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"unchecked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\">\n <label class=\"cui-checkbox__label\">\n <span>Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"hover-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\">\n <label class=\"cui-checkbox__label hover\">\n <span>Hover Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"focus-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input focus\">\n <label class=\"cui-checkbox__label\">\n <span>Focus Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"disabled-checked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" disabled checked>\n <label class=\"cui-checkbox__label\">\n <span>Disabled & Checked</span>\n </label>\n </div>\n </div>\n <div class=\"checked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" checked>\n <label class=\"cui-checkbox__label\">\n <span>Checked</span>\n </label>\n </div>\n </div>\n <div class=\"checked-hover-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" checked>\n <label class=\"cui-checkbox__label hover\">\n <span>Hover Checked</span>\n </label>\n </div>\n </div>\n <div class=\"checked-focus-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input focus\" checked>\n <label class=\"cui-checkbox__label\">\n <span>Focus Checked</span>\n </label>\n </div>\n </div>\n <div class=\"disabled-indeterminate-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input indeterminate\" disabled indeterminate>\n <label class=\"cui-checkbox__label\">\n <span>Disabled & Indeterminate</span>\n </label>\n </div>\n </div>\n <div class=\"indeterminate-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input indeterminate\" indeterminate>\n <label class=\"cui-checkbox__label\">\n <span>Indeterminate</span>\n </label>\n </div>\n </div>\n <div class=\"indeterminate-hover-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input indeterminate\" indeterminate>\n <label class=\"cui-checkbox__label hover\">\n <span>Indeterminate Hover</span>\n </label>\n </div>\n </div>\n <div class=\"indeterminate-focus-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input focus indeterminate\" indeterminate>\n <label class=\"cui-checkbox__label\">\n <span>Indeterminate Focus</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n <div class=\"checkbox-states medium-4 end columns cui--dark cui--client\" style=\"background-color: #333333;\">\n <h3 style=\"color: white;\">Dark</h3>\n <h5><code style=\"color: white; line-break\">.cui--dark <br> .cui-input--filled</code></h5>\n <div class=\"disabled-unchecked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" disabled>\n <label class=\"cui-checkbox__label\">\n <span>Disabled & Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"unchecked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\">\n <label class=\"cui-checkbox__label\">\n <span>Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"hover-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\">\n <label class=\"cui-checkbox__label hover\">\n <span>Hover Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"focus-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input focus\">\n <label class=\"cui-checkbox__label\">\n <span>Focus Unchecked</span>\n </label>\n </div>\n </div>\n <div class=\"disabled-checked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" disabled checked>\n <label class=\"cui-checkbox__label\">\n <span>Disabled & Checked</span>\n </label>\n </div>\n </div>\n <div class=\"checked-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" checked>\n <label class=\"cui-checkbox__label\">\n <span>Checked</span>\n </label>\n </div>\n </div>\n <div class=\"checked-hover-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input\" checked>\n <label class=\"cui-checkbox__label hover\">\n <span>Hover Checked</span>\n </label>\n </div>\n </div>\n <div class=\"checked-focus-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input focus\" checked>\n <label class=\"cui-checkbox__label\">\n <span>Focus Checked</span>\n </label>\n </div>\n </div>\n <div class=\"disabled-indeterminate-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input indeterminate\" disabled indeterminate>\n <label class=\"cui-checkbox__label\">\n <span>Disabled & Indeterminate</span>\n </label>\n </div>\n </div>\n <div class=\"indeterminate-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input indeterminate\" indeterminate>\n <label class=\"cui-checkbox__label\">\n <span>Indeterminate</span>\n </label>\n </div>\n </div>\n <div class=\"indeterminate-hover-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input indeterminate\" indeterminate>\n <label class=\"cui-checkbox__label hover\">\n <span>Indeterminate Hover</span>\n </label>\n </div>\n </div>\n <div class=\"indeterminate-focus-state\">\n <div class=\"cui-input-container cui-checkbox\">\n <input type=\"checkbox\" class=\"cui-input cui-checkbox__input focus indeterminate\" indeterminate>\n <label class=\"cui-checkbox__label\">\n <span>Indeterminate Focus</span>\n </label>\n </div>\n </div>\n </div>"}]},"hidecode":"true","core":true}]},{"name":"ComboBox","component":"combo-box","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Default ComboBox","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"ComboBox with clear enabled","section":"combo-box-clear","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dark State","section":"dark-state","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"ComboBox with options as Nodes","section":"combo-box-nodes","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Date Pickers","component":"date-picker","description":"Date pickers allow users to select a single or a range of dates and times.","sections":[{"name":"Datepicker","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"With Date Datepicker","section":"date","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Large Datepicker","section":"large","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Required Datepicker","section":"required","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Editable Textfield","component":"editable-textfield","description":"Span that, when clicked, will turn into an Input to be edited","sections":[{"name":"Basic Example","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Forms","component":"form","description":"Forms are used for submitting data.","sections":[{"name":"Basic Example","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Inputs","component":"input","description":"Text inputs allow people to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Text input boxes can span single or multiple lines. A combination of form styles and the layout-grid means you can do almost anything.","sections":[{"name":"Normal","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Text Inputs","section":"text-input","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Input with clear button","section":"clear","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Error","section":"error","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Warning","section":"warning","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Success","section":"success","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Disabled","section":"disabled","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Read Only","section":"read-only","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Help Text(Description)","section":"help-text","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Secondary Label","section":"secondary-label","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Text Area","section":"text-area","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Input Validation","section":"validation","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Input Advanced Validation","section":"advanced-validation","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Nested Input","section":"nested","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Outline (default) States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Filled States","section":"filled-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Labels","component":"label","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Links","component":"link","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dark States","section":"dark-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Default Links","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Colors & Themes","section":"colors","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Radios","component":"radio","description":"Radio buttons allow the user to select one option from a set.","sections":[{"name":"Basic Radios","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Disabled Radios","section":"disabled","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"On Radio","section":"checked","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Nested Radios","section":"nested","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Outline States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Filled States","section":"filled-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Search Inputs","component":"search-input","description":"Specialized text input for search capability.","sections":[{"name":"States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dark States","section":"dark-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Normal","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Pill","section":"pill","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Selects","component":"select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","sections":[{"name":"States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dark States","section":"dark-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Default","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Nested Select","section":"nested","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Select with Objects","section":"objects","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Select with Filter","section":"filter","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Disabled Select","section":"disabled","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Combobox","section":"combobox","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Searchable Comobbox","section":"searchable-combo","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Multi Select","section":"multi-select","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Select Validation","section":"validation","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Secondary Label","section":"secondary-label","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Sliders","component":"slider","description":"Sliders let users select from a range of values by moving the slider thumb.","sections":[{"name":"Min/Max Slider","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Time Slider","section":"time-slider","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Single Pointer Slider","section":"single-pointer","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Time Pickers","component":"time-picker","description":"Time pickers allow users to select a single or a range of dates and times.","sections":[{"name":"Default Timepicker","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Timepicker with 24 HR Format","section":"24-hour","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Timepicker with 30 min Steps","section":"30-minute-step","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Timepicker with Validation","section":"validation","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Toggle Switches","component":"toggle-switch","description":"On/off switches allow the user to toggle the state of the control from on to off or enabled to disabled.","sections":[{"name":"States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dark States","section":"dark-states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Toggle Switch","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Type Ahead","component":"type-ahead","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Typeahead","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Typeahead Underline","section":"underline","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Typeahead Large","section":"large","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]}]},"communication":{"name":"Communication","category":"communication","description":"","children":[{"name":"Alert Banners","component":"alert-banner","description":"Alert Banners are to be used with caution. They take the whole width of the application. They can convey simple information message, warnings or critical information. They can also optionnally be dismissed.","sections":[{"name":"Alert Banner","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Warning Alert Banner","section":"warning","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Error Alert Banner","section":"error","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Alerts","component":"alert","description":"Alerts to show Success/Error Messages.","sections":[{"name":"Alerts","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Informational Alert","section":"info","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Success Alert","section":"success","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Warning Alert","section":"warning","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Error Alert","section":"error","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Meeting Alert","section":"meeting","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Call Alert","section":"call","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Avatars","component":"avatar","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Different sizes of avatar","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Types of Avatar","section":"types","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Avatar with Click","section":"click","description":"Avatar with onClick prop"},{"name":"Avatar with different contents","section":"contents","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Composite Avatar","section":"composite","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Badges","component":"badge","description":"Badges are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a badge that notes when something was updated by adding a <span class=\"cui-badge\">.","sections":[{"name":"Badge States","section":"states","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","category":"communication","component":"badge","variations":{"html":[{"example":"
Blue .cui-spinner .cui-spinner--blue .cui-spinner--20
\n \n
\n
\n
Blue .cui-spinner .cui-spinner--blue .cui-spinner--28
\n \n
\n
\n
Blue .cui-spinner .cui-spinner--blue .cui-spinner--36
\n \n
","escaped":" <div class=\"docs-example docs-example--spacing\">\n <h3>Default <code class=\"small\">.cui-spinner</code></h3>\n <i class=\"cui-spinner\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Default <code class=\"small\">.cui-spinner .cui-spinner--20</code></h3>\n <i class=\"cui-spinner cui-spinner--20\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Default <code class=\"small\">.cui-spinner .cui-spinner--28</code></h3>\n <i class=\"cui-spinner cui-spinner--28\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Default <code class=\"small\">.cui-spinner .cui-spinner--36</code></h3>\n <i class=\"cui-spinner cui-spinner--36\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Blue <code class=\"small\">.cui-spinner .cui-spinner--blue</code></h3>\n <i class=\"cui-spinner cui-spinner--blue\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Blue <code class=\"small\">.cui-spinner .cui-spinner--blue .cui-spinner--20</code></h3>\n <i class=\"cui-spinner cui-spinner--blue cui-spinner--20\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Blue <code class=\"small\">.cui-spinner .cui-spinner--blue .cui-spinner--28</code></h3>\n <i class=\"cui-spinner cui-spinner--blue cui-spinner--28\"></i>\n </div>\n <div class=\"docs-example docs-example--spacing\">\n <h3>Blue <code class=\"small\">.cui-spinner .cui-spinner--blue .cui-spinner--36</code></h3>\n <i class=\"cui-spinner cui-spinner--blue cui-spinner--36\"></i>\n </div>"}]},"hidecode":"true","core":true},{"name":"Check","section":"check","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Notifications","component":"notification","description":"Notifications to show Success/Error Messages.","sections":[{"name":"Messages","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Popovers","component":"popover","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Popover on Hover","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Popover on Click","section":"onclick","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Popover on Focus","section":"onfocus","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Popover with Size Constraints","section":"sizing","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Progress Bars","component":"progress-bar","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Striped Progress Bar","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Tooltips","component":"tooltip","description":"Tooltips provide additional information upon hover or focus. They often contain helper text that is contextual to an element.","sections":[{"name":"Tooltip","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Positional","section":"positional","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dynamic","section":"dynamic","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Dynamic Popup","section":"popup","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Custom Trigger","section":"trigger","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Disable Tooltip","section":"disabled","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Conditonal Tooltip","section":"conditional","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Status Indicators","component":"status-indicator","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Status Indicators","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]}]}}
![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=1st%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=2nd%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=3rd%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=4th%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=5th%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=6th%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=7th%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=8th%20image&w=200&h=200\"/)
\n ![](\"https://placeholdit.imgix.net/~text?txtsize=33&txt=9th%20image&w=200&h=200\"/)
\n ![](\"/assets/spark-logo.svg\"){kind=logo}
\n ![](\"https://randomuser.me/api/portraits/men/85.jpg\")
\n