Buttons
Buttons can be either button or a tags.
<button class="Btn">Default button</button>
<button class="Btn" disabled>Default button (disabled)</button>
<button class="Btn Btn--primary">Primary button</button>
<button class="Btn Btn--primary" disabled>Primary button (disabled)</button>
<button class="Btn Btn--secondary">Secondary button</button>
<button class="Btn Btn--secondary" disabled>Secondary button (disabled)</button>
<button class="Btn Btn--success">Success button</button>
<button class="Btn Btn--neutral">Neutral button</button>
<button class="Btn Btn--attention">Attention button</button>
<button class="Btn Btn--error">Error button</button>
<button class="Btn Btn--dark">Dark button</button>
<button class="Btn Btn--light">Light button</button>
Outline buttons
<button class="Btn Btn--outline-default">Default button</button>
<button class="Btn Btn--outline-primary">Primary button</button>
<button class="Btn Btn--outline-primary" disabled>Primary button (disabled)</button>
<button class="Btn Btn--outline-secondary">Secondary button</button>
<button class="Btn Btn--outline-success">Success button</button>
<button class="Btn Btn--outline-neutral">Neutral button</button>
<button class="Btn Btn--outline-attention">Attention button</button>
<button class="Btn Btn--outline-error">Error button</button>
<button class="Btn Btn--outline-dark">Dark button</button>
<button class="Btn Btn--outline-light">Light button</button>
Button sizes
<button class="Btn Btn--sm">Small button</button>
<button class="Btn Btn--lg">Large button</button>
Other behaviours
<button class="Btn" disabled="disabled">Disabled button</button>
<a href="#" class="Btn Btn--secondary">Using anchor</a>
<button class="Btn Btn--spaced">Spaced button</button>
<button class="Btn Btn--edged">Edged button</button>
<button class="Btn">
<svg class="Icon" title="facebook colored icon" role="img">
<use xlink:href="#facebookColored"></use>
</svg>
<span class="Btn-label">
Button with icon
</span>
</button>
<button class="Btn Btn--dark Btn--menu">
<span class="Btn-menuIcon">
<svg class="Icon Icon--reverse" title="weave icon" role="img">
<use xlink:href="#weave"></use>
</svg>
</span>
<span class="Btn-label">
Menu button
</span>
</button>
<button class="Btn Btn--edged Btn--menu">
<span class="Btn-menuIcon">
<svg class="Icon Icon--reverse" title="weave icon" role="img">
<use xlink:href="#weave"></use>
</svg>
</span>
<span class="Btn-label">
Menu edged button
</span>
</button>
<button class="Btn Btn--expanded">Full width button</button>
<button class="Btn Btn--expanded Btn--spacedBetween">
Spaced between button
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
Icon Buttons
The IconBtn module is used for UI button elements that only feature an icon.
<button class="IconBtn">
<svg class="Icon Icon--circle Icon--filled Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</button>
<button class="IconBtn IconBtn--unspaced">
<svg class="Icon" title="facebook colored icon" role="img">
<use xlink:href="#facebookColored"></use>
</svg>
</button>
<button class="IconBtn IconBtn--unspaced">
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
</button>
Type Buttons
The TypeBtn module is used as the lowest form of heirarchy for buttons. This does not include base styled anchor tags.
The TypeBtn--anchor sub-module is used for instances where a button is the semantically best option, but it is styled as a base anchor tag.
<button class="TypeBtn">Basic TypeBtn</button>
<a href="" class="TypeBtn">Anchor tag as TypeBtn</a>
<button class="TypeBtn TypeBtn--anchor">TypeBtn with anchor style</button>
<button class="TypeBtn TypeBtn--unspaced">TypeBtn with no padding</button>
<a href="" class="TypeBtn TypeBtn--icon">
<svg class="Icon" title="arrow check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span class="TypeBtn-label">
TypeBtn with icon
</span>
</a>
<button class="TypeBtn TypeBtn--unspaced secondary-font">TypeBtn with secondary font</button>
TypeBtn - variants
<p class="BtnGroup">
<button class="TypeBtn TypeBtn--primary">TypeBtn Primary</button>
<button class="TypeBtn TypeBtn--secondary">TypeBtn Secondary</button>
<button class="TypeBtn TypeBtn--success">TypeBtn Success</button>
<button class="TypeBtn TypeBtn--primaryColored">TypeBtn Colored Primary</button>
<button class="TypeBtn TypeBtn--secondaryColored">TypeBtn Colored Secondary</button>
<button class="TypeBtn TypeBtn--successColored">TypeBtn Colored Success</button>
</p>
TypeBtn - Reverse
<div class="Callout Callout--dark BtnGroup">
<button class="TypeBtn TypeBtn--primary TypeBtn--reverse">TypeBtn Reversed Primary</button>
<button class="TypeBtn TypeBtn--secondary TypeBtn--reverse">TypeBtn Reversed Secondary</button>
<button class="TypeBtn TypeBtn--success TypeBtn--reverse">TypeBtn Reversed Success</button>
</div>
TypeBtn - Using icons
<div class="BtnGroup">
<button class="TypeBtn">
<svg class="Icon Icon--lg" title="block accent clear icon" role="img">
<use xlink:href="#blockAccentClear"></use>
</svg>
</button>
<button class="TypeBtn">
<svg class="Icon Icon--lg" title="block accent solid icon" role="img">
<use xlink:href="#blockAccentSolid"></use>
</svg>
</button>
<button class="TypeBtn">
<svg class="Icon Icon--lg" title="block clear clear icon" role="img">
<use xlink:href="#blockClearClear"></use>
</svg>
</button>
<button class="TypeBtn TypeBtn--disabled">
<svg class="Icon Icon--lg" title="block solid clear icon" role="img">
<use xlink:href="#blockSolidClear"></use>
</svg>
</button>
<button class="TypeBtn TypeBtn--active">
<svg class="Icon Icon--lg" title="block clear solid icon" role="img">
<use xlink:href="#blockClearSolid"></use>
</svg>
</button>
</div>
Button Group
<div class="BtnGroup">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
Button Group - Different gap size
<div class="section section-sm">
<div class="BtnGroup BtnGroup--gap-xxs">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
</div>
<div class="section section-sm">
<div class="BtnGroup BtnGroup--gap-xs">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
</div>
<div class="section section-sm">
<div class="BtnGroup BtnGroup--gap-sm">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
</div>
<div class="section section-sm">
<div class="BtnGroup BtnGroup--gap-lg">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
</div>
<div class="section section-sm">
<div class="BtnGroup BtnGroup--gap-xl">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
</div>
BtnGroup - divider line
<div class="BtnGroup">
<button class="Btn Btn--primary">Button</button>
<div class="Divider-line"></div>
<button class="Btn Btn--secondary">Button</button>
<div class="Divider-line"></div>
<button class="Btn Btn--success">Button</button>
</div>
Button Group - Merged
<div class="BtnGroup BtnGroup--merged">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--primary">Button</button>
</div>
Button Group - Nested
<div class="BtnGroup">
<div class="BtnGroup BtnGroup--merged">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--primary">Button</button>
</div>
<div class="BtnGroup BtnGroup--merged">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--primary">Button</button>
</div>
<button class="Btn Btn--primary">Button</button>
</div>
Button Group - Vertical
<div class="BtnGroup BtnGroup--vertical">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
Button Group - Expanded
<div class="BtnGroup BtnGroup--expanded">
<button class="Btn Btn--primary">Button</button>
<button class="Btn Btn--secondary">Button</button>
<button class="Btn Btn--success">Button</button>
</div>
Button Group - Other use
<div class="BtnGroup BtnGroup--gap-xxl">
<div class="BtnGroup BtnGroup--merged">
<button class="IconBtn">
<svg class="Icon" title="facebook white icon" role="img">
<use xlink:href="#facebookWhite"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="instagram white icon" role="img">
<use xlink:href="#instagramWhite"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="twitter white icon" role="img">
<use xlink:href="#twitterWhite"></use>
</svg>
</button>
</div>
<div class="BtnGroup BtnGroup--gap-xxs">
<button class="TypeBtn">
<svg class="Icon" title="block accent clear icon" role="img">
<use xlink:href="#blockAccentClear"></use>
</svg>
</button>
<button class="TypeBtn">
<svg class="Icon" title="block accent solid icon" role="img">
<use xlink:href="#blockAccentSolid"></use>
</svg>
</button>
<button class="TypeBtn">
<svg class="Icon" title="block clear clear icon" role="img">
<use xlink:href="#blockClearClear"></use>
</svg>
</button>
</div>
<div class="BtnGroup BtnGroup--merged">
<button class="Btn Btn--primary Btn--edged">Button</button>
<button class="Btn Btn--primary Btn--edged">Button</button>
<button class="Btn Btn--primary Btn--edged">Button</button>
</div>
</div>
Carousel
The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
<div class="Carousel" data-carousel>
<div class="Carousel-main">
<div class="Carousel-prev">
<button class="IconBtn" data-carousel-button-prev>
<svg class="Icon Icon--lg" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</button>
</div>
<div class="Carousel-list" data-carousel-list>
<div class="Carousel-track" data-carousel-track>
<div class="Carousel-slide" data-carousel-slide>
<div class="Callout">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nisi quidem iste placeat, dolore voluptate, doloribus dolorum ipsa voluptas molestias ipsam voluptates porro, mollitia officiis ipsum quos magni alias amet.
</div>
</div>
<div class="Carousel-slide" data-carousel-slide>
<div class="Callout">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nisi quidem iste placeat, dolore voluptate, doloribus dolorum ipsa voluptas molestias ipsam voluptates porro, mollitia officiis ipsum quos magni alias amet.
</div>
</div>
<div class="Carousel-slide" data-carousel-slide>
<div class="Callout">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nisi quidem iste placeat, dolore voluptate, doloribus dolorum ipsa voluptas molestias ipsam voluptates porro, mollitia officiis ipsum quos magni alias amet.
</div>
</div>
<div class="Carousel-slide" data-carousel-slide>
<div class="Callout">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nisi quidem iste placeat, dolore voluptate, doloribus dolorum ipsa voluptas molestias ipsam voluptates porro, mollitia officiis ipsum quos magni alias amet.
</div>
</div>
<div class="Carousel-slide" data-carousel-slide>
<div class="Callout">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nisi quidem iste placeat, dolore voluptate, doloribus dolorum ipsa voluptas molestias ipsam voluptates porro, mollitia officiis ipsum quos magni alias amet.
</div>
</div>
</div>
</div>
<div class="Carousel-next">
<button class="IconBtn" data-carousel-button-next>
<svg class="Icon Icon--lg" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
</div>
</div>
</div>
Settings
You can change the settings by adding data-carousel-options. Format should be in JSON.
Available options:
- slidesToShow - # of slides to show.
- slidesToScroll - # of slides to scroll.
- speed - Slide animation speed.
- initialSlide - Slide to start on.
- Ease - CSS3 Animation Easing.
<div class="Carousel" data-carousel data-carousel-options='{"slidesToShow":"5"}'>
<div class="Carousel-main">
<div class="Carousel-prev">
<button class="IconBtn" data-carousel-button-prev>
<svg class="Icon Icon--lg" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</button>
</div>
<div class="Carousel-list" data-carousel-list>
<div class="Carousel-track" style="text-align:center" data-carousel-track>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepDisplay" title="Black Sheep Display"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepRightHandRaised" title="Black Sheep Right Hand Raised"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepStanding" title="Black Sheep Standing"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepWithChecklist" title="Black Sheep With Checklist"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepWithChecklistAndPen" title="Black Sheep With Checklist and Pen"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepWithChecklistCenteredHalf" title="Black Sheep With Checklist Centered Half"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepWithGear" title="Black Sheep With Gear"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--einsteinSheep" title="Einstein Sheep"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--sheepRockstar" title="Sheep Rockstar icon"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--sheepNewTask" title="Sheep with task list"></span>
</div>
<div class="Carousel-slide" data-carousel-slide>
<span class="Graphic Graphic--blackSheepCreateCompany" title="Black Sheep icon"></span>
</div>
</div>
</div>
<div class="Carousel-next">
<button class="IconBtn" data-carousel-button-next>
<svg class="Icon Icon--lg" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
</div>
</div>
</div>
Collapsible
The Collapsible toggles the visibilty of content. It has the following data attributes:
data-collapse- indicator that there is a collapsible elementdata-collapse-target- used by the trigger and is pointed to thedata-collapse-iddata-collapse-id- is the target collapsibledata-collapse-action- is the desired action to the collapsible elementcollapse-plus- toggled icon to expandcollapse-minus- toggledd icon to collapse
and has the following classes:
.is-expanded- used to indicate the width/height of the collapsible element.is-faded- used to gradually fade/unfade the content of the collapsible element.is-shown- used to hide/show the content of the collapsible element
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, non!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, non!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, non!
Below shows the Dashboard Center that uses the Collapsible.
It expands/collapses the Dashboard Center horizontally upon click of the data-collapse button
Below are 2 different buttons with 2 different actions. It targets the Dashboard Centre above.
It uses data-collapse-action that has either an expand or collapse value.
Below shows a sample callout that uses the Collapsible.
It expands/collapses the callout vertically upon click of the data-collapse button.
<div class="section">
<button class="Btn Btn--primary" data-collapse="" data-collapse-target="collapsible1">Basic</button>
<div data-collapse-id="collapsible1" class="Collapsible Collapsible--borderless">
<div data-collapse-body="" class="Collapsible-collapse">
<div class="Callout">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, non!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, non!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, non!</p>
</div>
</div>
</div>
</div>
<div class="section">
<p>Below shows the <strong>Dashboard Center</strong> that uses the <em>Collapsible</em>.</p>
<p>It expands/collapses the Dashboard Center horizontally upon click of the <em>data-collapse</em> button</p>
<div class="row">
<div data-collapse-id="DashboardCenter" class="DashboardCenter Collapsible Collapsible--toLeft Collapsible--rightToggle is-horizontally is-shown is-faded is-expanded">
<button class="Collapsible-toggle Btn Btn--dark" data-collapse data-collapse-target="DashboardCenter">
<small>
<svg class="Icon Icon--reverse" title="arrow left icon" collapse-plus="">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
<svg class="Icon Icon--reverse is-hidden" title="arrow right icon" collapse-minus="">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</small>
</button>
<div data-collapse-body="" class="DashboardCenter-body Collapsible-collapse">
<h4>Dashboard Center</h4>
<div class="section-sm">
<nav class="Tab Tab--dark Tab--sharp" tab-target="TabDashboardCenter">
<ul class="Tab-menu">
<li class="Tab-item" data-tab data-target="TabDashboards">
<a class="Tab-link" href="#">
<small class="Tab-text">
DASHBOARDS
</small>
</a>
</li>
<li class="Tab-item Tab-is-active" data-tab data-target="TabWidgets">
<a class="Tab-link" href="#">
<small class="Tab-text">
WIDGETS
</small>
</a>
</li>
</ul>
</nav>
</div>
<div class="DashboardCenter-content">
<div class="Input Input--icon Input--rounded">
<div class="Input-field">
<svg class="Input-icon Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
<input type="password" placeholder="Type here">
</div>
</div>
<div class="Tab-contents is-scrollable-y" tab-contents-id="TabDashboardCenter">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content data-id="TabWidgets">
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon Icon--lg" title="battery colored icon" role="img">
<use xlink:href="#batteryColored"></use>
</svg>
<div><small>Battery</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="numbers colored icon" role="img">
<use xlink:href="#numbersColored"></use>
</svg>
<div><small>Numbers</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="Todo icon" role="img">
<use xlink:href="#todoColored"></use>
</svg>
<div><small>Todo List</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="time tracker icon" role="img">
<use xlink:href="#timeTrackerColored"></use>
</svg>
<div><small>Time Tracking</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="chart colored icon" role="img">
<use xlink:href="#chartColored"></use>
</svg>
<div><small>Chart</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="calendar colored icon" role="img">
<use xlink:href="#calendarColored"></use>
</svg>
<div><small>Calendar</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="newsfeed colored icon" role="img">
<use xlink:href="#newsfeedColored"></use>
</svg>
<div><small>News Feed</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="gantt colored icon" role="img">
<use xlink:href="#ganttColored"></use>
</svg>
<div><small>Gantt</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="timeline icon" role="img">
<use xlink:href="#timelineColored"></use>
</svg>
<div><small>Timeline</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="chat colored icon" role="img">
<use xlink:href="#chatColored"></use>
</svg>
<div><small>Chat</small></div>
</div>
</div>
<p>
<small><a href="#">Show all widgets</a></small>
</p>
</div>
<div class="Tab-content" data-tab-content data-id="TabDashboards">
<button class="Btn Btn--expanded Btn--dark Btn--spaced Btn--spacedBetween">
Filter
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRight"></use>
</svg>
</button>
<button class="Btn Btn--expanded Btn--dark Btn--spaced Btn--spacedBetween">
Add new
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRight"></use>
</svg>
</button>
<div class="Accordion Accordion--attention">
<div class="Accordion-top">
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRight"></use>
</svg>
<svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUp"></use>
</svg>
Favorites
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Favorites 1</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Favorites 2</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Favorites 3</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="Accordion">
<div class="Accordion-top">
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRight"></use>
</svg>
<svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUp"></use>
</svg>
Dashboard folder
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Dashboard 1</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Dashboard 2</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row end-sm">
<div data-collapse-id="DashboardCenter2" class="DashboardCenter Collapsible Collapsible--toRight Collapsible--leftToggle is-horizontally is-shown is-faded is-expanded">
<button class="Collapsible-toggle Btn Btn--dark" data-collapse data-collapse-target="DashboardCenter2">
<small>
<svg class="Icon Icon--reverse" title="arrow right icon" collapse-plus="">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
<svg class="Icon Icon--reverse is-hidden" title="arrow left icon" collapse-minus="">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</small>
</button>
<div data-collapse-body="" class="DashboardCenter-body Collapsible-collapse">
<h4>Dashboard Center</h4>
<div class="section-sm">
<nav class="Tab Tab--dark Tab--sharp" tab-target="TabDashboardCenter">
<ul class="Tab-menu">
<li class="Tab-item" data-tab data-target="TabDashboards">
<a class="Tab-link" href="#">
<small class="Tab-text">
DASHBOARDS
</small>
</a>
</li>
<li class="Tab-item Tab-is-active" data-tab data-target="TabWidgets">
<a class="Tab-link" href="#">
<small class="Tab-text">
WIDGETS
</small>
</a>
</li>
</ul>
</nav>
</div>
<div class="DashboardCenter-content">
<div class="Input Input--icon Input--rounded">
<div class="Input-field">
<svg class="Input-icon Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
<input type="password" placeholder="Type here">
</div>
</div>
<div class="Tab-contents is-scrollable-y" tab-contents-id="TabDashboardCenter">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content data-id="TabWidgets">
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon Icon--lg" title="battery colored icon" role="img">
<use xlink:href="#batteryColored"></use>
</svg>
<div><small>Battery</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="numbers colored icon" role="img">
<use xlink:href="#numbersColored"></use>
</svg>
<div><small>Numbers</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="Todo icon" role="img">
<use xlink:href="#todoColored"></use>
</svg>
<div><small>Todo List</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="time tracker icon" role="img">
<use xlink:href="#timeTrackerColored"></use>
</svg>
<div><small>Time Tracking</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="chart colored icon" role="img">
<use xlink:href="#chartColored"></use>
</svg>
<div><small>Chart</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="calendar colored icon" role="img">
<use xlink:href="#calendarColored"></use>
</svg>
<div><small>Calendar</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="newsfeed colored icon" role="img">
<use xlink:href="#newsfeedColored"></use>
</svg>
<div><small>News Feed</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="gantt colored icon" role="img">
<use xlink:href="#ganttColored"></use>
</svg>
<div><small>Gantt</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="timeline icon" role="img">
<use xlink:href="#timelineColored"></use>
</svg>
<div><small>Timeline</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="chat colored icon" role="img">
<use xlink:href="#chatColored"></use>
</svg>
<div><small>Chat</small></div>
</div>
</div>
<p>
<small><a href="#">Show all widgets</a></small>
</p>
</div>
<div class="Tab-content" data-tab-content data-id="TabDashboards">
<button class="Btn Btn--expanded Btn--dark Btn--spaced Btn--spacedBetween">
Filter
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRight"></use>
</svg>
</button>
<button class="Btn Btn--expanded Btn--dark Btn--spaced Btn--spacedBetween">
Add new
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRight"></use>
</svg>
</button>
<div class="Accordion Accordion--attention">
<div class="Accordion-top">
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRight"></use>
</svg>
<svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUp"></use>
</svg>
Favorites
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Favorites 1</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Favorites 2</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Favorites 3</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="Accordion">
<div class="Accordion-top">
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRight"></use>
</svg>
<svg class="Icon is-hidden spin" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUp"></use>
</svg>
Dashboard folder
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Dashboard 1</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
<div class="Accordion-content">
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<a class="Accordion-action" href="#">Dashboard 2</a>
<div>
<button class="Accordion-btn" type="button">
<svg class="Icon" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<p>Below are 2 different buttons with 2 different actions. It targets the Dashboard Centre above.</p>
<p>It uses <em>data-collapse-action</em> that has either an <em>expand</em> or <em>collapse</em> value.</p>
<button class="Btn Btn--primary" data-collapse="" data-collapse-action="collapse" data-collapse-target="DashboardCenter2">Collapse</button>
<button class="Btn Btn--secondary" data-collapse="" data-collapse-action="expand" data-collapse-target="DashboardCenter2">Expand</button>
</div>
<div class="section">
<p>Below shows a sample callout that uses the <em>Collapsible</em>.</p>
<p>It expands/collapses the callout vertically upon click of the <em>data-collapse</em> button.</p>
<div data-collapse-id="CounterCenter" class="CounterCenter Collapsible Collapsible--toTop Collapsible--bottomToggle Collapsible--plainToggle is-expanded is-faded is-shown Callout Callout--primary">
<button class="CounterCenter-collapse Collapsible-toggle" data-collapse data-collapse-target="CounterCenter">
<span class="IconBtn IconBtn--unspaced">
<small>
<svg class="Icon Icon--circle Icon--filled Icon--xxl" title="arrow up icon" role="img" collapse-plus="">
<use xlink:href="#arrowUpOutlined"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--xxl is-hidden" title="arrow down icon" role="img" collapse-minus="">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</small>
</span>
</button>
<div data-collapse-body="" class="CounterCenter-body Collapsible-collapse">
<div class="Input Input--icon Input--rounded">
<div class="Input-field">
<svg class="Input-icon Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
<input type="password" placeholder="Type here">
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon Icon--lg" title="battery colored icon" role="img">
<use xlink:href="#batteryColored"></use>
</svg>
<div><small>Battery</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="numbers colored icon" role="img">
<use xlink:href="#numbersColored"></use>
</svg>
<div><small>Numbers</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="Todo icon" role="img">
<use xlink:href="#todoColored"></use>
</svg>
<div><small>Todo List</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="time tracker icon" role="img">
<use xlink:href="#timeTrackerColored"></use>
</svg>
<div><small>Time Tracking</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="chart colored icon" role="img">
<use xlink:href="#chartColored"></use>
</svg>
<div><small>Chart</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="calendar colored icon" role="img">
<use xlink:href="#calendarColored"></use>
</svg>
<div><small>Calendar</small></div>
</div>
</div>
<div class="WidgetCard">
<div class="WidgetCard-content">
<svg class="Icon" title="newsfeed colored icon" role="img">
<use xlink:href="#newsfeedColored"></use>
</svg>
<div><small>News Feed</small></div>
</div>
</div>
</div>
</div>
</div>
Dropdowns
Dropdowns are toggled and used for displaying lists of links and more
drop-item-level- attribute is used for items that are indented but needs to be hovered in full width. At the moment, the applicable values are2and3. This would be multiplied by the default indention which is$dropdown-x-gutter.- data-drop-short - data attribute to apply the maximum height limit of the drop menus. When it reaches 18rem of height, they will have a vertical scrollbar.
- data-drop-narrow - data attribute to apply the maximum width limit of the drop menus
- data-drop-toggle - Alternative if will not use class Drop-toggle
- data-drop-direction - data attribute for the drop direction.
- data-drop-alignment - data attribute for the drop alignment.
- data-drop-close-on-scroll - data attribute for closing drop on scroll.
This is an expanded dropdown inside a grid
Dropdown Avatar
Dropdown Avatar Input
<div class="section">
<div class="Drop">
<button class="Avatar-initials Avatar-btn Drop-toggle">HP</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop">
<button class="Btn Btn--edged Btn--menu Drop-toggle">
<span class="Btn-menuIcon">
<svg class="Icon Icon--reverse" title="weave icon" role="img">
<use xlink:href="#weave"></use>
</svg>
</span>
<span class="Btn-label">
Menu button
</span>
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">New</a>
<a class="Drop-item" href="#">Open</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<span class="Drop">
<button class="TypeBtn TypeBtn--secondary Drop-toggle">
<svg class="Icon" title="drop arrow down icon" role="img">
<use xlink:href="#arrowDownSolid"></use>
</svg>
<span class="Avatar Avatar--sm Avatar--inline">
<span class="Avatar-initials">SM</span>
</span>
Ethical kickstarter
</button>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<a class="Drop-item" href="#">Dashboard 1</a>
<a class="Drop-item" href="#">Dashboard 2</a>
<a class="Drop-item" href="#">Dashboard 3</a>
<a class="Drop-item" href="#">Dashboard 4</a>
<a class="Drop-item" href="#">Dashboard 5</a>
<a class="Drop-item" href="#">Dashboard 6</a>
<a class="Drop-item" href="#">Dashboard 7</a>
<a class="Drop-item" href="#">Dashboard 8</a>
<a class="Drop-item" href="#">Dashboard9</a>
</div>
</span>
<div class="Drop">
<button class="TypeBtn TypeBtn--secondary Drop-toggle">
<svg class="Icon" title="drop arrow down icon" role="img">
<use xlink:href="#arrowDownSolid"></use>
</svg>
<span class="Avatar Avatar--sm Avatar--inline">
<span class="Avatar-initials">SM</span>
</span>
Dropdown with multilevel menu
</button>
<div class="Drop-menu" data-drop-menu>
<a class="Drop-item" href="#">Dashboard 1</a>
<a class="Drop-item" href="#">Dashboard 2</a>
<a class="Drop-item" href="#">Dashboard 3</a>
<div class="Drop-text Drop-parent">
<span>Dashboard Folder</span>
<div class="Drop-menu">
<a class="Drop-item" href="#">Dashboard 1</a>
<a class="Drop-item" href="#">Dashboard 2</a>
<a class="Drop-item" href="#">Dashboard 3</a>
</div>
</div>
</div>
</div>
<div class="Drop">
<button class="TypeBtn TypeBtn--secondary Drop-toggle">
<svg class="Icon" title="drop arrow down icon" role="img">
<use xlink:href="#arrowDownSolid"></use>
</svg>
<span class="Avatar Avatar--sm Avatar--inline">
<span class="Avatar-initials">SM</span>
</span>
Dropdown with indented items
</button>
<div class="Drop-menu is-scrollable-y" data-drop-menu>
<span class="Drop-text">Dashboard Folder</span>
<a class="Drop-item" href="#" drop-item-level="2">Dashboard 1</a>
<a class="Drop-item" href="#" drop-item-level="2">Dashboard 2</a>
<a class="Drop-item" href="#" drop-item-level="2">Dashboard 3</a>
<span class="Drop-text is-ellipsed">Dashboard items on 3rd level</span>
<a class="Drop-item" href="#" drop-item-level="3">Dashboard 1</a>
<a class="Drop-item" href="#" drop-item-level="3">Dashboard 2</a>
<a class="Drop-item" href="#" drop-item-level="3">Dashboard 3</a>
</div>
</div>
</div>
<div class="row section">
<div class="col-sm-6">
<h4>This is an expanded dropdown inside a grid</h4>
</div>
<div class="col-sm-2">
<div class="Drop Drop--expanded">
<button class="Drop-toggle Btn Btn--primary Btn--expanded Btn--spacedBetween">
Color Themes
<svg class="Icon Icon--reverse" title="arrowDown icon" role="img">
<use xlink:href="#arrowDown"></use>
</svg>
</button>
<div class="Drop-menu is-scrollable-y">
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Happy Day</div>
<div class="Palette-colors">
<div class="Palette-color happy-day-1"> </div>
<div class="Palette-color happy-day-2"> </div>
<div class="Palette-color happy-day-3"> </div>
<div class="Palette-color happy-day-4"> </div>
<div class="Palette-color happy-day-5"> </div>
<div class="Palette-color happy-day-6"> </div>
<div class="Palette-color happy-day-7"> </div>
<div class="Palette-color happy-day-8"> </div>
<div class="Palette-color happy-day-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Fin Du Mundo</div>
<div class="Palette-colors">
<div class="Palette-color fin-du-mundo-1"> </div>
<div class="Palette-color fin-du-mundo-2"> </div>
<div class="Palette-color fin-du-mundo-3"> </div>
<div class="Palette-color fin-du-mundo-4"> </div>
<div class="Palette-color fin-du-mundo-5"> </div>
<div class="Palette-color fin-du-mundo-6"> </div>
<div class="Palette-color fin-du-mundo-7"> </div>
<div class="Palette-color fin-du-mundo-8"> </div>
<div class="Palette-color fin-du-mundo-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Twilite</div>
<div class="Palette-colors">
<div class="Palette-color twilite-1"> </div>
<div class="Palette-color twilite-2"> </div>
<div class="Palette-color twilite-3"> </div>
<div class="Palette-color twilite-4"> </div>
<div class="Palette-color twilite-5"> </div>
<div class="Palette-color twilite-6"> </div>
<div class="Palette-color twilite-7"> </div>
<div class="Palette-color twilite-8"> </div>
<div class="Palette-color twilite-9"> </div>
</div>
</div>
</div>
<div class="Drop-item Drop-item-is-active">
<div class="Palette Palette--stretched">
<div class="Palette-text">Cyber Punk</div>
<div class="Palette-colors">
<div class="Palette-color cyber-punk-1"> </div>
<div class="Palette-color cyber-punk-2"> </div>
<div class="Palette-color cyber-punk-3"> </div>
<div class="Palette-color cyber-punk-4"> </div>
<div class="Palette-color cyber-punk-5"> </div>
<div class="Palette-color cyber-punk-6"> </div>
<div class="Palette-color cyber-punk-7"> </div>
<div class="Palette-color cyber-punk-8"> </div>
<div class="Palette-color cyber-punk-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Steam Punk</div>
<div class="Palette-colors">
<div class="Palette-color steam-punk-1"> </div>
<div class="Palette-color steam-punk-2"> </div>
<div class="Palette-color steam-punk-3"> </div>
<div class="Palette-color steam-punk-4"> </div>
<div class="Palette-color steam-punk-5"> </div>
<div class="Palette-color steam-punk-6"> </div>
<div class="Palette-color steam-punk-7"> </div>
<div class="Palette-color steam-punk-8"> </div>
<div class="Palette-color steam-punk-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Pep Rally</div>
<div class="Palette-colors">
<div class="Palette-color pep-rally-1"> </div>
<div class="Palette-color pep-rally-2"> </div>
<div class="Palette-color pep-rally-3"> </div>
<div class="Palette-color pep-rally-4"> </div>
<div class="Palette-color pep-rally-5"> </div>
<div class="Palette-color pep-rally-6"> </div>
<div class="Palette-color pep-rally-7"> </div>
<div class="Palette-color pep-rally-8"> </div>
<div class="Palette-color pep-rally-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Earth Watch</div>
<div class="Palette-colors">
<div class="Palette-color earth-watch-1"> </div>
<div class="Palette-color earth-watch-2"> </div>
<div class="Palette-color earth-watch-3"> </div>
<div class="Palette-color earth-watch-4"> </div>
<div class="Palette-color earth-watch-5"> </div>
<div class="Palette-color earth-watch-6"> </div>
<div class="Palette-color earth-watch-7"> </div>
<div class="Palette-color earth-watch-8"> </div>
<div class="Palette-color earth-watch-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Exclamation</div>
<div class="Palette-colors">
<div class="Palette-color exclamation-1"> </div>
<div class="Palette-color exclamation-2"> </div>
<div class="Palette-color exclamation-3"> </div>
<div class="Palette-color exclamation-4"> </div>
<div class="Palette-color exclamation-5"> </div>
<div class="Palette-color exclamation-6"> </div>
<div class="Palette-color exclamation-7"> </div>
<div class="Palette-color exclamation-8"> </div>
<div class="Palette-color exclamation-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Boardroom</div>
<div class="Palette-colors">
<div class="Palette-color boardroom-1"> </div>
<div class="Palette-color boardroom-2"> </div>
<div class="Palette-color boardroom-3"> </div>
<div class="Palette-color boardroom-4"> </div>
<div class="Palette-color boardroom-5"> </div>
<div class="Palette-color boardroom-6"> </div>
<div class="Palette-color boardroom-7"> </div>
<div class="Palette-color boardroom-8"> </div>
<div class="Palette-color boardroom-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Meetcute</div>
<div class="Palette-colors">
<div class="Palette-color meetcute-1"> </div>
<div class="Palette-color meetcute-2"> </div>
<div class="Palette-color meetcute-3"> </div>
<div class="Palette-color meetcute-4"> </div>
<div class="Palette-color meetcute-5"> </div>
<div class="Palette-color meetcute-6"> </div>
<div class="Palette-color meetcute-7"> </div>
<div class="Palette-color meetcute-8"> </div>
<div class="Palette-color meetcute-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Breeze</div>
<div class="Palette-colors">
<div class="Palette-color breeze-1"> </div>
<div class="Palette-color breeze-2"> </div>
<div class="Palette-color breeze-3"> </div>
<div class="Palette-color breeze-4"> </div>
<div class="Palette-color breeze-5"> </div>
<div class="Palette-color breeze-6"> </div>
<div class="Palette-color breeze-7"> </div>
<div class="Palette-color breeze-8"> </div>
<div class="Palette-color breeze-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Sahara</div>
<div class="Palette-colors">
<div class="Palette-color sahara-1"> </div>
<div class="Palette-color sahara-2"> </div>
<div class="Palette-color sahara-3"> </div>
<div class="Palette-color sahara-4"> </div>
<div class="Palette-color sahara-5"> </div>
<div class="Palette-color sahara-6"> </div>
<div class="Palette-color sahara-7"> </div>
<div class="Palette-color sahara-8"> </div>
<div class="Palette-color sahara-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Flamingo</div>
<div class="Palette-colors">
<div class="Palette-color flamingo-1"> </div>
<div class="Palette-color flamingo-2"> </div>
<div class="Palette-color flamingo-3"> </div>
<div class="Palette-color flamingo-4"> </div>
<div class="Palette-color flamingo-5"> </div>
<div class="Palette-color flamingo-6"> </div>
<div class="Palette-color flamingo-7"> </div>
<div class="Palette-color flamingo-8"> </div>
<div class="Palette-color flamingo-9"> </div>
</div>
</div>
</div>
<div class="Drop-item">
<div class="Palette Palette--stretched">
<div class="Palette-text">Hippie</div>
<div class="Palette-colors">
<div class="Palette-color hippie-1"> </div>
<div class="Palette-color hippie-2"> </div>
<div class="Palette-color hippie-3"> </div>
<div class="Palette-color hippie-4"> </div>
<div class="Palette-color hippie-5"> </div>
<div class="Palette-color hippie-6"> </div>
<div class="Palette-color hippie-7"> </div>
<div class="Palette-color hippie-8"> </div>
<div class="Palette-color hippie-9"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="row">
<div class="col-sm-6">
<h4>Dropdown Avatar</h4>
<div class="Drop Drop--expanded">
<button class="Btn Btn--outline Btn--edged Btn--expanded Btn--spacedBetween Drop-toggle middle-sm">
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text">
<small>Personal Account</small>
</div>
</div>
</div>
<svg class="Icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</button>
<div class="Drop-menu">
<a class="Drop-item" href="#">Others</a>
<hr class="Drop-divider" />
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">
<span class="Interactive Interactive--blankUser" title="Blank User icon"></span>
</span>
<div>
<div class="Avatar-text">John Doe</div>
<div class="Avatar-text">
<small>Sourcefit Inc.</small>
</div>
</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">JD</span>
<div class="Avatar-text">Jane Doe</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text">
<small>Lorem Ipsum</small>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Dropdown Avatar Input</h4>
</div>
</div>
<div class="Drop Drop--expanded Drop--input">
<div class="Input Input--addon" data-drop-toggle>
<input type="text" placeholder="Enter Username" />
<div class="Input-addon">
<button class="IconBtn IconBtn--unspaced IconBtn--plain" type="button">
<svg class="Icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</button>
</div>
</div>
<div class="Drop-menu">
<h4 class="Drop-header">Dashboard type</h4>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">
<span class="Interactive Interactive--blankUser" title="Blank User icon" ></span>
</span>
<div>
<div class="Avatar-text">John Doe</div>
<div class="Avatar-text">
<small>Sourcefit Inc.</small>
</div>
</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">JD</span>
<div class="Avatar-text">Jane Doe</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text">
<small>Lorem Ipsum</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="Drop">
<button class="TypeBtn TypeBtn--secondary Drop-toggle">
<span class="Avatar Avatar--sm Avatar--inline">
<span class="Avatar-initials">AD</span>
</span>
Dropdown Avatar using List Group as Dropdown item
</button>
<div class="Drop-menu">
<span class="Drop-text">Lorem ipsum dolor sit amet</span>
<hr class="Drop-divider" data-v-2b9c74a9="" />
<div class="List List-group List--ghost">
<div class="List-item List-item-is-hoverable Drop-item">
<div class="List-holder is-ellipsed">
<div class="Avatar">
<span class="Avatar-initials">
<span title="Blank User icon" class="Interactive Interactive--blankUser" ></span>
</span>
<div>
<div class="Avatar-text">Jane Doe</div>
<div class="Avatar-text">
<small>Banh mi tumeric</small>
</div>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu IconBtn IconBtn--unspaced">
<svg class="Icon" title="link icon" role="img">
<use xlink:href="#link"></use>
</svg>
</button>
</div>
</div>
<div class="List-item List-item-is-hoverable Drop-item">
<div class="List-holder is-ellipsed">
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text">
<small>Personal Account</small>
</div>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu IconBtn IconBtn--unspaced">
<svg class="Icon" title="link icon" role="img">
<use xlink:href="#link"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<span class="Drop" data-drop-direction="right">
<button class="Btn Btn--dark Btn--spaced Btn--spacedBetween" data-drop-toggle>
Dropdown with checkboxes as option
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<h4 class="Drop-text">Dashboard type</h4>
<div class="Drop-item Checkbox">
<input id="personalFilter" type="checkbox" />
<label for="personalFilter">
<span class="Checkbox-button"></span>
Personal
</label>
</div>
<div class="Drop-item Checkbox">
<input id="sharedByMeFilter" type="checkbox" />
<label for="sharedByMeFilter">
<span class="Checkbox-button"></span>
Shared by me
</label>
</div>
<div class="Drop-item Checkbox">
<input id="sharedToMeFilter" type="checkbox" />
<label for="sharedToMeFilter">
<span class="Checkbox-button"></span>
Shared to me
</label>
</div>
<div class="Drop-item Checkbox Checkbox--right">
<input id="personalFilter2" type="checkbox" />
<label for="personalFilter2">
<span class="Checkbox-button"></span>
Personal
</label>
</div>
<div class="Drop-item Checkbox Checkbox--right">
<input id="sharedByMeFilter2" type="checkbox" />
<label for="sharedByMeFilter2">
<span class="Checkbox-button"></span>
Shared by me
</label>
</div>
<div class="Drop-item Checkbox Checkbox--right">
<input id="sharedToMeFilter2" type="checkbox" />
<label for="sharedToMeFilter2">
<span class="Checkbox-button"></span>
Shared to me
</label>
</div>
<div class="Drop-item Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="AvatarDropdownCheckbox2" />
<label for="AvatarDropdownCheckbox2">
<span class="Checkbox-button"></span>
<div class="Avatar Avatar--sm Avatar--centered">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
<div>
<div class="Avatar-text">Jane Doe</div>
</div>
</div>
</label>
</div>
</div>
</span>
<div class="Drop Drop--inline" data-drop-close-on-scroll>
<button class="IconBtn Drop-toggle">
Dropdown close on scroll
</button>
<div class="Drop-menu" data-drop-arrow="top-left">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="/">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
Using data-drop-toggle
<div class="Drop">
<button type="button" class="IconBtn" data-drop-toggle>
<svg title="meatball icon" role="img" class="Icon">
<use xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu">
<a class="Drop-item" href="#">
<svg class="Icon Drop-icon" title="trash outlined icon" role="img">
<use xlink:href="#trashOutlined"></use>
</svg>
Move to trash
</a>
<hr class="Drop-divider"/>
<a class="Drop-item" href="#">
<svg class="Icon Drop-icon" title="move icon" role="img">
<use xlink:href="#move"></use>
</svg>
Move to Folder
</a>
<a class="Drop-item" href="#">
<svg class="Icon Drop-icon" title="pen outlined icon" role="img">
<use xlink:href="#penOutlined"></use>
</svg>
Rename
</a>
</div>
</div>
Inline dropdown
Dropdown buttons can be inlined and display on different directions
<div class="Drop Drop--inline" data-drop-direction="up">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop up
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="/">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="down">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop down
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="right">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop right
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="left">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop left
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
Different directions
<div class="Drop Drop--inline" data-drop-direction="up">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop up
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="/">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="down">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop down
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="right">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop right
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="left">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop left
</button>
<div class="Drop-menu">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
Dropdown with arrow
<div class="Drop Drop--inline" data-drop-direction="up">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop up
</button>
<div class="Drop-menu" data-drop-arrow="bottom-left">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="/">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="down">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop down
</button>
<div class="Drop-menu" data-drop-arrow="top-left">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="right">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop right
</button>
<div class="Drop-menu" data-drop-arrow="left-top">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-direction="left">
<button class="IconBtn Drop-toggle">
<svg class="Icon Icon--circle Icon--filled Icon--xlg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Drop left
</button>
<div class="Drop-menu" data-drop-arrow="right-top">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
Different alignments
Allowed values are start, center, and end
<div class="Drop Drop--inline" data-drop-alignment="start">
<button class="IconBtn Drop-toggle">
Drop start alignment
</button>
<div class="Drop-menu" data-drop-arrow="top-left">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="/">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-alignment="center">
<button class="IconBtn Drop-toggle">
Drop center alignment
</button>
<div class="Drop-menu" data-drop-arrow="top-center">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
<div class="Drop Drop--inline" data-drop-alignment="end">
<button class="IconBtn Drop-toggle">
Drop end alignment
</button>
<div class="Drop-menu" data-drop-arrow="top-right">
<span class="Drop-text">Dropdown item text</span>
<a class="Drop-item" href="#">Action</a>
<a class="Drop-item" href="#">Another action</a>
<a class="Drop-item" href="#">Something else here</a>
</div>
</div>
File Input
Input type file
<form class="Form">
<div class="Field">
<div class="Field-control">
<label class="File File--neutral">
<input type="file" hidden multiple />
<span class="Field-label">Input type file, variant neutral</span>
<span class="File-field">
<span class="File-content">
<span class="File-placeholder">Browse File</span>
</span>
<span class="File-button">Browse</span>
</span>
</label>
</div>
</div>
<div class="Field">
<div class="Field-control">
<label class="File File--primary">
<input type="file" hidden multiple disabled />
<span class="Field-label">Input type file disabled, variant primary</span>
<span class="File-field">
<span class="File-content">
<span class="File-placeholder">Browse File</span>
</span>
<span class="File-button">Browse</span>
</span>
</label>
</div>
</div>
</form>
Form & Field
All forms should be namespaced by the Form class. We don't globally style form elements. This gives us the flexibility to introduce new form modules in the future, without impacting existing modules.
<form class="Form">
<fieldset>
<legend>A standard form</legend>
<div class="Field">
<label class="Field-label">Default field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
</div>
</div>
</div>
<div class="Field Field--inline">
<label class="Field-label">Inline field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
</div>
</div>
</div>
<div class="Field Field--inlineFluid">
<label class="Field-label">Inline fluid field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
</div>
</div>
</div>
<div class="Field Field-is-valid">
<label class="Field-label">Success field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
<div class="Field-message">
This is a message
</div>
</div>
</div>
</div>
<div class="Field Field-is-invalid">
<label class="Field-label">Error field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
<div class="Field-message">
This is a message
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Field with using grid</legend>
<div class="row">
<div class="col-sm-2">
<div class="Field">
<label class="Field-label">Default field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="Field">
<label class="Field-label">Default field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="Field">
<label class="Field-label">Default field</label>
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Type here" />
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<br />
Input
<div class="Field">
<div class="Field-control">
<div class="Input">
<input type="text" placeholder="Basic input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--rounded">
<input type="text" placeholder="Rounded input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--shaded">
<input type="text" placeholder="Shaded input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--transparent">
<input type="text" placeholder="Transparent input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--primary">
<input type="text" placeholder="Primary input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--default">
<input type="text" placeholder="Default input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--info">
<input type="text" placeholder="Info input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--info>
<input type="text" placeholder="Info input" readonly />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--info">
<input type="text" placeholder="Info input" value="Readonly" readonly />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--info Input--focus">
<input type="text" placeholder="Focused input" />
</div>
</div>
</div>
Input sizing
<div class="Field">
<div class="Field-control">
<div class="Input Input--sm">
<input type="text" placeholder="Small Input" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--xs">
<input type="text" placeholder="Extra Small Input" />
</div>
</div>
</div>
Input with addons
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Input with icon" />
<div class="Input-addon is-unclickable">
<svg class="Input-icon Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<div class="Input-addon is-unclickable">
<svg class="Input-icon Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
</div>
<input type="text" placeholder="Input with icon" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Input with clickable icon" />
<div class="Input-addon">
<button class="IconBtn IconBtn--unspaced IconBtn--plain" type="button">
<svg class="Icon" title="visibility off icon" role="img">
<use xlink:href="#visibilityOff"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addonDivided">
<div class="Input-addon is-unclickable">
<svg class="Input-icon Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
</div>
<input type="text" placeholder="Input with division" />
</div>
</div>
</div>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Input with dropdown" />
<div class="Input-addon">
<div class="Drop">
<button class="TypeBtn TypeBtn--sm TypeBtn--icon Drop-toggle">
<span class="TypeBtn-label">
Lorem
</span>
<svg class="Icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</button>
<div class="Drop-menu">
<a class="Drop-item">Ipsum</a>
<a class="Drop-item">Dolor</a>
<a class="Drop-item">Sit</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Field">
<div class="Field-control Drop Drop--expanded" data-drop-toggle>
<div class="Input Input--addon">
<input type="text" placeholder="Input with a clickable icon and suggestions" value="">
<div class="Input-addon">
<button class="IconBtn IconBtn--unspaced IconBtn--plain" type="button">
<svg class="Icon Icon--xl" title="search icon" role="img">
<use xlink:href="#searchColored"></use>
</svg>
</button>
</div>
</div>
<div class="Drop-menu">
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Pizza <em>Pie</em></a>
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Cherry <em>Pie</em>
Pikachu
</a>
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Guns and <em>Pie</em></a>
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Hard Rock
<em>Pier</em>
</a>
<a class="Drop-item">
<span>
No results found!
</span>
</a>
</div>
</div>
</div>
<div class="Field">
<div class="Field-control Drop Drop--expanded" data-drop-toggle>
<div class="Input Input--tags">
<div class="Input-inner">
<span class="Badge Badge--secondary Input-tag">
<button class="TypeBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<span>Option - 1</span>
</span>
<span class="Badge Badge--secondary Input-tag">
<button class="TypeBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<span>Very looooooooooooong option</span>
</span>
<input type="text" value=Search">
</div>
<div class="Input-addon">
<button class="IconBtn IconBtn--unspaced IconBtn--plain" type="button">
<svg class="Icon" title="search icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</button>
</div>
</div>
<div class="Drop-menu">
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Pizza <em>Pie</em></a>
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Cherry <em>Pie</em>
Pikachu
</a>
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Guns and <em>Pie</em></a>
<a class="Drop-item" data-input-list-content href="javascript:void(0)">Hard Rock
<em>Pier</em>
</a>
<a class="Drop-item">
<span>
No results found!
</span>
</a>
</div>
</div>
</div>
Ghost input
- For
Input--ghost,data-input-dynamicattribute needs to be added for its width to dynamically adjust upon user's input.
<div class="Field">
<label class="Field-label">Ghost Input that expands dynamically upon typing</label>
<div class="Field-control">
<div class="Input Input--ghost">
<input type="text" data-input-dynamic />
</div>
</div>
</div>
<div class="Field">
<label class="Field-label">Ghost Input that expands dynamically upon typing</label>
<div class="Field-control">
<div class="Drop Drop--input" data-drop-direction="down">
<div class="Input Input--ghost">
<div class="Input-field">
<input type="text" data-input-dynamic Drop-toggle/>
</div>
</div>
<div class="Drop-menu">
<h4 class="Drop-header">Connections</h4>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">
<span class="Interactive Interactive--blankUser" title="Blank User icon"></span>
</span>
<div>
<div class="Avatar-text">John Doe</div>
<div class="Avatar-text">
<small>Sourcefit Inc.</small>
</div>
</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">JD</span>
<div class="Avatar-text">Jane Doe</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text">
<small>Lorem Ipsum</small>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Input Group
Inputs can be grouped together:
/
/
<div class="Field">
<label class="Field-label">Date of birth</label>
<div class="Field-control">
<div class="Input">
<div class="Input-group">
<select class="Input-has-postfix">
<option>01</option>
<option>02</option>
<option>03</option>
</select>
<div class="Input-prefix Input-postfix"> / </div>
<select class="Input-has-prefix Input-has-postfix">
<option>Feb</option>
</select>
<div class="Input-prefix Input-postfix"> / </div>
<select class="Input-has-prefix">
<option>1989</option>
</select>
</div>
</div>
</div>
</div>
<div class="Input Input-stacked">
<div class="Input-group">
<input type="text" placeholder="Search..." />
<button class="Btn Btn--primary">Search</button>
</div>
</div>
Quantity Input
<div class="section">
<div class="Quantity" data-quantity>
<button type="button" class="Btn Btn--primary Btn--edged" data-quantity-decrement>
<svg class="Icon" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</button>
<div class="Input">
<input type="number" min="1" max="5" data-quantity-input />
</div>
<button type="button" class="Btn Btn--primary Btn--edged" data-quantity-increment>
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
</div>
</div>
<div class="section">
<div class="Quantity Quantity--expanded" data-quantity data-quantity-no-decimal>
<button type="button" class="Btn Btn--primary Btn--edged" data-quantity-decrement>
<svg class="Icon" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</button>
<div class="Input">
<input type="number" min="1" max="5" data-quantity-input />
</div>
<button type="button" class="Btn Btn--primary Btn--edged" data-quantity-increment>
<svg class="Icon" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
</div>
</div>
Radio Inputs
<form class="Form">
<fieldset>
<div class="Field">
<div class="Radio">
<input type="radio" id="radio1" name="radioname" />
<label for="radio1">
<span class="Radio-button"></span>
Just me
</label>
</div>
</div>
<div class="Field">
<div class="Radio">
<input type="radio" id="radio2" name="radioname" />
<label for="radio2">
<span class="Radio-button"></span>
You and I
</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Radio Radio--inline">
<input type="radio" id="radio3" name="radioname2" />
<label for="radio3">
<span class="Radio-button"></span>
Dogs
</label>
</div>
<div class="Radio Radio--inline">
<input type="radio" id="radio4" name="radioname2" />
<label for="radio4">
<span class="Radio-button"></span>
Cats
</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Radio Radio--inline Radio--solid">
<input type="radio" id="radio6" name="radioname3" />
<label for="radio20">
Solid
</label>
</div>
<div class="Radio Radio--inline Radio--solid Radio--disabled">
<input type="radio" id="radio6" name="radioname3" disabled />
<label for="radio21">
Solid disabled
</label>
</div>
<div class="Radio Radio--inline Radio--accent">
<input type="radio" id="radio7" name="radioname3" />
<label for="radio22">
Accent
</label>
</div>
<div class="Radio Radio--inline Radio--accent Radio--disabled">
<input type="radio" id="radio7" name="radioname3" disabled />
<label for="radio23">
Accent disabled
</label>
</div>
<div class="Radio Radio--inline Radio--clear">
<input type="radio" id="radio8" name="radioname3" />
<label for="radio24">
Clear
</label>
</div>
<div class="Radio Radio--inline Radio--clear Radio--disabled">
<input type="radio" id="radio8" name="radioname3" disabled />
<label for="radio25">
Clear disabled
</label>
</div>
<div class="Radio Radio--inline Radio--text">
<input type="radio" id="radio81" name="radioname4" />
<label for="radio81">
Text
</label>
</div>
<div class="Radio Radio--inline Radio--text Radio--disabled">
<input type="radio" id="radio81" name="radioname4" disabled />
<label for="radio81">
Text disabled
</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Radio Radio--solid Radio--expanded">
<input type="radio" id="radio9" name="radioname4" />
<label for="radio9">
Expanded Radio Button
</label>
</div>
</div>
</fieldset>
<div class="Field">
<div class="row">
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--expanded">
<input id="normal" type="radio" name="font-decoration" value="normal"/>
<label for="normal">
<svg class="Icon Icon--xxxl" title="Person block email" role="img">
<use xlink:href="#personEmail"></use>
</svg>
<div><small>sample text</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--expanded">
<input id="bold" type="radio" name="font-decoration" value="bold"
/>
<label for="bold">
<b>Aa</b>
<div><small>Bold</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--expanded">
<input id="italic" type="radio" name="font-decoration" value="italic"
/>
<label for="italic">
<b>Aa</b>
<div><small>Italic</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--expanded">
<input id="widget" type="radio" name="font-decoration" value="widget"
/>
<label for="widget">
<b>Aa</b>
<div><small>Sample 2</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--expanded">
<input id="widget1" type="radio" name="font-decoration" value="widget1"
/>
<label for="widget1">
<b>Aa</b>
<div><small>Sample2</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--expanded">
<input id="widget5" type="radio" name="font-decoration" value="widget5"
/>
<label for="widget5">
<b>Aa</b>
<div><small>Sample 3</small></div>
</label>
</div>
</div>
</div>
</div>
<div class="Field">
<div class="row">
<div class="col-sm-1">
<div
class="Radio Radio--widget Radio--secondary Radio--expanded"
>
<input
id="dashboard"
type="radio"
name="font-decoration"
value="dashboard"
/>
<label for="dashboard">
<span class="Interactive Interactive--dashboard" title="Dashboard icon"></span>
<span><small>Dashboard</small></span>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--primary Radio--expanded">
<input
id="chat"
type="radio"
name="font-decoration"
value="chat"
/>
<label for="chat">
<span class="Interactive Interactive--chat" title="Chat icon"></span>
<span><small>Chat</small></span>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Radio Radio--widget Radio--dark Radio--expanded">
<input
id="contacts"
type="radio"
name="font-decoration"
value="contacts"
/>
<label for="contacts">
<span class="Interactive Interactive--contacts" title="Contacts icon"></span>
<span><small>Contacts</small></span>
</label>
</div>
</div>
</div>
</div>
<h4>Colored Radio Input</h4>
<p>Radio input with colored background and displays checked icon once selected. Colored radio button are used for color pallete</p>
<fieldset>
<div class="Field">
<div class="Radio Radio--paletteLight mono-400">
<input type="radio" id="radiocircle" name="radioname" checked />
<label for="radiocircle">
<svg class="Icon Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</label>
</div>
<div class="Radio Radio--paletteLight happy-day-5">
<input type="radio" id="radiocircle2" name="radioname" />
<label for="radiocircle2">
<svg class="Icon Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</label>
</div>
<div class="Radio Radio--palette happy-day-5">
<input type="radio" id="radiocircle3" name="radioname" />
<label for="radiocircle3">
<svg class="Icon Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</label>
</div>
<div class="Radio Radio--paletteLight mono-100">
<input type="radio" id="radiocircle4" name="radioname" />
<label for="radiocircle4">
<svg class="Icon Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</label>
</div>
<div class="Radio Radio--palette happy-day-7">
<input type="radio" id="radiocircle5" name="radioname" />
<label for="radiocircle5">
<svg class="Icon Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</label>
</div>
</div>
</fieldset>
<div class="row center-sm">
<div class="col-sm-2">
<div class="Radio Radio--expanded Radio--card">
<input id="lorem" type="radio" name="card" value="lorem" />
<label for="lorem">
<div class="Card Card--primary">
<div class="Card-content section-reverse">
<h3 class="Card-title">Lorem</h3>
</div>
<img class="img-fluid mediaObject Card-contentBottom" src="https://placebear.com/200/200"/>
</div>
</label>
</div>
</div>
<div class="col-sm-2">
<div class="Radio Radio--expanded Radio--card">
<input id="ipsum" type="radio" name="card" value="ipsum" />
<label for="ipsum">
<div class="Card Card--secondary">
<div class="Card-content section-reverse">
<h3 class="Card-title">Ipsum</h3>
</div>
<img class="img-fluid mediaObject Card-contentBottom" src="https://placebear.com/200/200"/>
</div>
</label>
</div>
</div>
</div>
</form>
Checkbox Inputs
<form class="Form">
<fieldset>
<div class="Field">
<div class="Checkbox">
<input type="checkbox" id="checkbox0" disabled />
<label for="checkbox0">
<span class="Checkbox-button"></span>
<span>Disabled checkbox</span>
</label>
</div>
</div>
<div class="Field">
<div class="Checkbox Checkbox--xxxs">
<input type="checkbox" id="checkbox_xxxs" />
<label for="checkbox_xxxs">
<span class="Checkbox-button"></span>
<span>checkbox xxxs</span>
</label>
</div>
<div class="Checkbox Checkbox--xxs">
<input type="checkbox" id="checkbox_xxs" />
<label for="checkbox_xxs">
<span class="Checkbox-button"></span>
<span>checkbox xxs</span>
</label>
</div>
<div class="Checkbox Checkbox--xs">
<input type="checkbox" id="checkbox_xs" />
<label for="checkbox_xs">
<span class="Checkbox-button"></span>
<span>checkbox xs</span>
</label>
</div>
<div class="Checkbox Checkbox--sm">
<input type="checkbox" id="checkbox_sm" />
<label for="checkbox_sm">
<span class="Checkbox-button"></span>
<span>checkbox sm</span>
</label>
</div>
<div class="Checkbox">
<input type="checkbox" id="checkbox_md" />
<label for="checkbox_md">
<span class="Checkbox-button"></span>
<span>checkbox</span>
</label>
</div>
<div class="Checkbox Checkbox--lg">
<input type="checkbox" id="checkbox_lg" />
<label for="checkbox_lg">
<span class="Checkbox-button"></span>
<span>checkbox lg</span>
</label>
</div>
<div class="Checkbox Checkbox--xl">
<input type="checkbox" id="checkbox_xl" />
<label for="checkbox_xl">
<span class="Checkbox-button"></span>
<span>checkbox xl</span>
</label>
</div>
<div class="Checkbox Checkbox--xxl">
<input type="checkbox" id="checkbox_xxl" />
<label for="checkbox_xxl">
<span class="Checkbox-button"></span>
<span>checkbox xxl</span>
</label>
</div>
<div class="Checkbox Checkbox--xxxl">
<input type="checkbox" id="checkbox_xxxl" />
<label for="checkbox_xxxl">
<span class="Checkbox-button"></span>
<span>checkbox xxxl</span>
</label>
</div>
<div class="Checkbox Checkbox--xxxxl">
<input type="checkbox" id="checkbox_xxxxl" />
<label for="checkbox_xxxxl">
<span class="Checkbox-button"></span>
<span>checkbox xxxxl</span>
</label>
</div>
</div>
<div class="Field">
<div class="Checkbox">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<span class="Checkbox-button"></span>
<span>Yes, I like dogs</span>
</label>
</div>
</div>
<div class="Field Field-is-invalid">
<div class="Checkbox">
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">
<span class="Checkbox-button"></span>
<span>Yes, I like cats</span>
</label>
<span class="Field-message">You must like birds</span>
</div>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="checkbox3" />
<label for="checkbox3">
<span class="Checkbox-button"></span>
I agree
</label>
</div>
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="checkbox4" />
<label for="checkbox4">
<span class="Checkbox-button"></span>
I certainly agree
</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Checkbox Checkbox--right">
<input type="checkbox" id="checkbox5" />
<label for="checkbox5">
<span class="Checkbox-button"></span>
<span>Yes, I like dogs</span>
</label>
</div>
</div>
<div class="Field Field-is-invalid">
<div class="Checkbox Checkbox--right">
<input type="checkbox" id="checkbox6" />
<label for="checkbox6">
<span class="Checkbox-button"></span>
<span>Yes, I like cats</span>
</label>
</div>
<span class="Field-message">You must like birds</span>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="checkbox7" />
<label for="checkbox7">
<span class="Checkbox-button"></span>
<div class="Avatar Avatar--centered">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text">Jane Doe</div>
<div class="Avatar-text"><small>Banh mi tumeric deep v letterpress butcher raw denim</small></div>
</div>
</div>
</label>
</div>
</div>
<div class="Field Field-is-invalid">
<div class="Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="checkbox8" />
<label for="checkbox8">
<span class="Checkbox-button"></span>
<div class="Avatar Avatar--sm Avatar--centered">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
<div>
<div class="Avatar-text">Jane Doe</div>
</div>
</div>
</label>
</div>
<span class="Field-message">You must like birds</span>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="Checkbox Checkbox--dashed">
<input type="checkbox" id="checkbox9" />
<label for="checkbox9">
<span class="Checkbox-button"></span>
<span>Dashed checkbox</span>
</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="Field">
<div class="row">
<div class="col-sm-1">
<div class="Checkbox Checkbox--widget">
<input id="widget1" type="checkbox" name="font-decoration" value="widget1">
<label for="widget1">
<b>Aa</b>
<div><small>Sample 1</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Checkbox Checkbox--widget Checkbox--primary">
<input id="widget2" type="checkbox" name="font-decoration" value="widget2">
<label for="widget2">
<b>Aa</b>
<div><small>Sample 2</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Checkbox Checkbox--widget Checkbox--secondary">
<input id="widget3" type="checkbox" name="font-decoration" value="widget3">
<label for="widget3">
<b>Aa</b>
<div><small>Sample 3</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Checkbox Checkbox--widget Checkbox--attention">
<input id="widget4" type="checkbox" name="font-decoration" value="widget4">
<label for="widget4">
<b>Aa</b>
<div><small>Sample 4</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Checkbox Checkbox--widget Checkbox--error">
<input id="widget5" type="checkbox" name="font-decoration" value="widget5">
<label for="widget5">
<b>Aa</b>
<div><small>Sample 5</small></div>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="Checkbox Checkbox--widget Checkbox--dark">
<input id="widget6" type="checkbox" name="font-decoration" value="widget6">
<label for="widget6">
<b>Aa</b>
<div><small>Sample 6</small></div>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Toggle Inputs
<form class="Form">
<fieldset>
<div class="Toggle">
<input type="checkbox" id="switch0" checked disabled />
<label class="Toggle-label" for="switch0">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
Disabled Toggle
</label>
</div>
<div class="Toggle">
<input type="checkbox" id="switch1" checked />
<label class="Toggle-label" for="switch1">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
voluptatum deleniti
</label>
</div>
<div class="Toggle">
<input type="checkbox" id="switch2" />
<label class="Toggle-label" for="switch2">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
laborum et dolorum
</label>
</div>
<div class="Toggle Toggle--right">
<input type="checkbox" id="switch3" />
<label class="Toggle-label" for="switch3">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
ut aut
</label>
</div>
</fieldset>
<fieldset>
<h3>Inline Toggles</h3>
<div class="Toggle Toggle--inline">
<input type="checkbox" id="switch4" checked />
<label class="Toggle-label" for="switch4">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
qui officia
</label>
</div>
<div class="Toggle Toggle--inline">
<input type="checkbox" id="switch5" />
<label class="Toggle-label" for="switch5">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
tenetur a sapiente
</label>
</div>
</fieldset>
<fieldset>
<h3>Responsive Toggles</h3>
<div class="Toggle Toggle--responsive">
<input type="checkbox" id="switch6" checked />
<label class="Toggle-label" for="switch6">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
nihil impedit
</label>
</div>
<div class="Toggle Toggle--right Toggle--responsive">
<input type="checkbox" id="switch7" />
<label class="Toggle-label" for="switch7">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
excepturi sint occaecati cupiditate
</label>
</div>
</fieldset>
<fieldset>
<h3>Toggle in a grid</h3>
<div class="row center-sm">
<div class="col-sm-2">
<div class="Toggle Toggle--right Toggle--responsive">
<input type="checkbox" id="switch8" />
<label class="Toggle-label" for="switch8">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
excepturi sint occaecati cupiditate
</label>
</div>
</div>
<div class="col-sm-2">
<div class="Toggle Toggle--responsive">
<input type="checkbox" id="switch9" checked />
<label class="Toggle-label" for="switch9">
<span class="Toggle-slider" data-on-label="On" data-off-label="Off"></span>
nihil impedit
</label>
</div>
</div>
</div>
</fieldset>
</form>
List Box
<form class="Form">
<fieldset>
<div class="ListBox">
<div class="ListBox-field">
<div class="ListBox-item">
<input type="radio" id="listbox1" name="listboxname1" />
<label class="ListBox-itemLabel" for="listbox1">
<svg class="Icon" title="duplicate icon" role="img">
<use xlink:href="#duplicate"></use>
</svg>
Dashboard Folder 1
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox2" name="listboxname2" />
<label class="ListBox-itemLabel" for="listbox2">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 2
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox3" name="listboxname3" />
<label class="ListBox-itemLabel" for="listbox3">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 3
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox4" name="listboxname4" disabled />
<label class="ListBox-itemLabel" for="listbox4">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 4
</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="ListBox Input-is-invalid">
<div class="ListBox-field">
<div class="ListBox-item">
<input type="radio" id="listbox5" name="listboxname5" />
<label class="ListBox-itemLabel" for="listbox5">
<svg class="Icon" title="duplicate icon" role="img">
<use xlink:href="#duplicate"></use>
</svg>
Dashboard Folder 1
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox6" name="listboxname6" />
<label class="ListBox-itemLabel" for="listbox6">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 2
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox7" name="listboxname7" />
<label class="ListBox-itemLabel" for="listbox7">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 3
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox8" name="listboxname8" />
<label class="ListBox-itemLabel" for="listbox8">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 4
</label>
</div>
</div>
<span class="Input-message">Validation message</span>
</div>
</fieldset>
<fieldset>
<div class="ListBox">
<div class="ListBox-field">
<div class="ListBox-item">
<input type="checkbox" id="listbox9" name="listboxname9" />
<label class="ListBox-itemLabel" for="listbox9">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dogs
</label>
</div>
<div class="ListBox-item">
<input type="checkbox" id="listbox10" name="listboxname10" />
<label class="ListBox-itemLabel" for="listbox10">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Cats
</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="ListBox">
<div class="ListBox-field is-scrollable-y">
<div class="ListBox-item">
<input type="radio" id="listbox11" name="listboxname11" />
<label class="ListBox-itemLabel" for="listbox11">
<svg class="Icon" title="duplicate icon" role="img">
<use xlink:href="#duplicate"></use>
</svg>
Dashboard Folder 1
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox12" name="listboxname12" />
<label class="ListBox-itemLabel" for="listbox12">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 2
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox13" name="listboxname13" />
<label class="ListBox-itemLabel" for="listbox13">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 3
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox14" name="listboxname14" />
<label class="ListBox-itemLabel" for="listbox14">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 4
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox15" name="listboxname15" />
<label class="ListBox-itemLabel" for="listbox15">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 5
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox16" name="listboxname16" />
<label class="ListBox-itemLabel" for="listbox16">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 6
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox17" name="listboxname17" />
<label class="ListBox-itemLabel" for="listbox17">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 7
</label>
</div>
<div class="ListBox-item">
<input type="radio" id="listbox18" name="listboxname18" />
<label class="ListBox-itemLabel" for="listbox18">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Dashboard Folder 8
</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="ListBox">
<div class="ListBox-field">
<div class="ListBox-item">
<div class="ListBox-text">No results found</div>
</div>
</div>
</div>
</fieldset>
</form>
Helper
<div class="section">
<div class="Callout" style="height: 30rem">
<div class="Helper is-expanded is-faded is-shown" data-collapse-id="KnitHelper">
<div class="Helper-content">
<div class="Helper-body">
<h3>Get started creating your dashboard</h3>
<div class="Helper-link">
<div class="Helper-linkTitle">Croix palo santo tilde</div>
<div class="Helper-linkDescription"><small>vaporware whatever green juice</small></div>
</div>
<div class="Helper-link">
<div class="Helper-linkTitle">Taiyaki chia gochujang</div>
<div class="Helper-linkDescription"><small>quinoa air plant la croix palo santo tilde</small></div>
</div>
<div class="Helper-link">
<div class="Helper-linkTitle"> La croix everyday carry</div>
<div class="Helper-linkDescription"><small>bushwick echo park shoreditch</small></div>
</div>
<div class="Helper-link">
<div class="Helper-linkTitle">Chia authentic offal jianbing</div>
<div class="Helper-linkDescription"><small>wayfarers artisan gentrify</small></div>
</div>
<div class="Helper-link">
<div class="Helper-linkTitle">Austin adaptogen prism</div>
<div class="Helper-linkDescription"><small>irony photo booth la croix everyday carry</small></div>
</div>
<div class="Helper-link">
<div class="Helper-linkTitle">Taiyaki chia gochujang</div>
<div class="Helper-linkDescription"><small>quinoa air plant la croix palo santo tilde</small></div>
</div>
</div>
</div>
<button class="Helper-knob" data-collapse data-collapse-target="KnitHelper">
<svg class="Icon is-hidden" title="close icon" role="img" collapse-plus="">
<use xlink:href="#close"></use>
</svg>
<span class="Interactive Interactive--sheepHelper Interactive--lg" title="Sheep Helper icon" collapse-minus=""></span>
</button>
</div>
</div>
</div>
Hover Effect
Opaque Hover Effect
Hover over me for Opaque Effect on Icon.
Hover over me for Hidden Effect on Button.
Hover over me for Opaque Effect on Button.
Hover over me for Hidden Effect on Button.
<div class="HoverEffect HoverEffect--opaque">
<span>Hover over me for Opaque Effect on Icon.</span>
<svg class="HoverEffect-target Icon Icon--meatball" title="action menu icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
<span>Hover over me for Hidden Effect on Button.</span>
</div>
<div class="HoverEffect HoverEffect--opaque">
<span>Hover over me for Opaque Effect on Button.</span>
<button class="HoverEffect-target Btn">Default button</button>
<span>Hover over me for Hidden Effect on Button.</span>
</div>
Hidden Hover Effect
Hover over me for Hidden Effect on Icon.
Hover over me for Hidden Effect on Button.
Hover over me for Hidden Effect on Button.
Hover over me for Hidden Effect on Button.
<div class="HoverEffect HoverEffect--hidden">
<span>Hover over me for Hidden Effect on Icon.</span>
<svg class="HoverEffect-target Icon Icon--meatball" title="action menu icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
<span>Hover over me for Hidden Effect on Button.</span>
</div>
<div class="HoverEffect HoverEffect--hidden">
<span>Hover over me for Hidden Effect on Button.</span>
<button class="HoverEffect-target Btn">Default button</button>
<span>Hover over me for Hidden Effect on Button.</span>
</div>
Slide In Hover Effect
<div class="HoverEffect HoverEffect--slideIn">
<span>Hover over me for Slide In Effect on Icon.</span>
<svg class="HoverEffect-target Icon Icon--meatball" title="action menu icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
<span>Hover over me for Slide In Effect on Button.</span>
</div>
<div class="HoverEffect HoverEffect--slideIn">
<span>Hover over me for Slide In Effect on Button.</span>
<button class="HoverEffect-target Btn">Default button</button>
<span>Hover over me for Slide In Effect on Button.</span>
</div>
Left Nav
The LeftNav component is a vertical navigation menu bar. It is composed of the following structure:
LeftNavthe main class around the topnav component.LeftNav-navthe navigation menu containerLeftNav-brandthe left-side of the main container which is always visible and usually contains the brand logo (BrandLogocomponent)LeftNav-togglethe toggle button that open and closes the topnav menu on tablet and mobile devices.LeftNav-iconthe menu icon that is displayed on the toggle button.
LeftNav-menuthe right-side of the main container that hold the menu items.LeftNav-primarythe container for primary menu items on the right.
The primary menu has the following structure:
LeftNav-linkthe top-level items on the topnav, this can be an<a>or<div>.
<header class="LeftNav" role="navigation" aria-label="main navigation">
<div class="LeftNav-content">
<div class="LeftNav-brand">
<a class="Interactive Interactive--sheep" title="Sheep icon"></a>
</div>
<ul class="LeftNav-menu">
<li class="LeftNav-item LeftNav-has-submenu">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--dashboard" title="Dashboard icon"></span>
<span class="LeftNav-text">Dashboard</span>
</a>
<ul class="LeftNav-submenu">
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--contacts Interactive--sm" title="Contacts icon"></span>
<span class="LeftNav-text">Contacts</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--chats Interactive--sm" title="Chats icon"></span>
<span class="LeftNav-text">Chats</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--list Interactive--sm" title="List icon"></span>
<span class="LeftNav-text">List</span>
</a>
</li>
</ul>
</li>
<li class="LeftNav-item">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--projects" title="Projects icon"></span>
<span class="LeftNav-text">Projects</span>
</a>
</li>
<li class="LeftNav-item">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--feedPage" title="Feed Page icon"></span>
<span class="LeftNav-text">Feed Page</span>
</a>
</li>
<li class="LeftNav-item LeftNav-has-submenu">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--views" title="Views icon"></span>
<span class="LeftNav-text">Views</span>
</a>
<ul class="LeftNav-submenu">
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--weaves Interactive--sm" title="Weaves icon"></span>
<span class="LeftNav-text">Weaves</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--kpi Interactive--sm" title="KPI icon"></span>
<span class="LeftNav-text">KPI</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--notes Interactive--sm" title="Notes icon"></span>
<span class="LeftNav-text">Notes</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--tickets Interactive--sm" title="Tickets icon"></span>
<span class="LeftNav-text">Tickets</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--calendar Interactive--sm" title="Calendar icon"></span>
<span class="LeftNav-text">Calendar</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--kanban Interactive--sm" title="Kanban icon"></span>
<span class="LeftNav-text">Kanban</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--gantt Interactive--sm" title="Gantt icon"></span>
<span class="LeftNav-text">Gantt</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--reports Interactive--sm" title="Reports icon"></span>
<span class="LeftNav-text">Reports</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--games Interactive--sm" title="Games icon"></span>
<span class="LeftNav-text">Games</span>
</a>
</li>
</ul>
</li>
<li class="LeftNav-item">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--toDos" title="To Dos icon"></span>
<span class="LeftNav-text">To Dos</span>
</a>
</li>
<li class="LeftNav-item">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--timeTracker" title="Time Tracker icon"></span>
<span class="LeftNav-text">Time Tracker</span>
</a>
</li>
<li class="LeftNav-item LeftNav-is-active LeftNav-has-submenu">
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--people" title="People icon"></span>
<span class="LeftNav-text">People</span>
</a>
<ul class="LeftNav-submenu">
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--contacts Interactive--sm" title="Contacts icon"></span>
<span class="LeftNav-text">Contacts</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--chat Interactive--sm" title="Chat icon"></span>
<span class="LeftNav-text">Chats</span>
</a>
</li>
<li>
<a class="LeftNav-link" href="#">
<span class="Interactive Interactive--list Interactive--sm" title="List icon"></span>
<span class="LeftNav-text">Lists</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="LeftNav-footer">
<a class="LeftNav-link" href="#" title="Recycle Bin">
<span class="Interactive Interactive--trash"></span>
</a>
</div>
</div>
</header>
NavBar
The NavBar component is a vertical navigation menu bar. It is composed of the following structure:
NavBarthe main class around the topnav component.NavBar-navthe navigation menu containerNavBar-brandthe left-side of the main container which is always visible and usually contains the brand logo (BrandLogocomponent)NavBar-togglethe toggle button that open and closes the topnav menu on tablet and mobile devices.NavBar-iconthe menu icon that is displayed on the toggle button.
NavBar-menuthe right-side of the main container that hold the menu items.NavBar-primarythe container for primary menu items on the right.
The primary menu has the following structure:
NavBar-linkthe top-level items on the topnav, this can be an<a>or<div>.
<header class="NavBar" role="navigation" aria-label="main navigation">
<div class="NavBar-content">
<div class="NavBar-brand">
<a class="Interactive Interactive--sheep" title="Sheep icon"></a>
</div>
<ul class="NavBar-menu">
<li class="NavBar-item NavBar-has-submenu">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--dashboard" title="Dashboard icon"></span>
<span class="NavBar-text">Dashboard</span>
</a>
<ul class="NavBar-submenu">
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--contacts Interactive--sm" title="Contacts icon"></span>
<span class="NavBar-text">Contacts</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--chats Interactive--sm" title="Chats icon"></span>
<span class="NavBar-text">Chats</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--list Interactive--sm" title="List icon"></span>
<span class="NavBar-text">List</span>
</a>
</li>
</ul>
</li>
<li class="NavBar-item">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--projects" title="Projects icon"></span>
<span class="NavBar-text">Projects</span>
</a>
</li>
<li class="NavBar-item">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--feedPage" title="Feed Page icon"></span>
<span class="NavBar-text">Feed Page</span>
</a>
</li>
<li class="NavBar-item NavBar-has-submenu">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--views" title="Views icon"></span>
<span class="NavBar-text">Views</span>
</a>
<ul class="NavBar-submenu">
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--weaves Interactive--sm" title="Weaves icon"></span>
<span class="NavBar-text">Weaves</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--kpi Interactive--sm" title="KPI icon"></span>
<span class="NavBar-text">KPI</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--notes Interactive--sm" title="Notes icon"></span>
<span class="NavBar-text">Notes</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--tickets Interactive--sm" title="Tickets icon"></span>
<span class="NavBar-text">Tickets</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--calendar Interactive--sm" title="Calendar icon"></span>
<span class="NavBar-text">Calendar</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--kanban Interactive--sm" title="Kanban icon"></span>
<span class="NavBar-text">Kanban</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--gantt Interactive--sm" title="Gantt icon"></span>
<span class="NavBar-text">Gantt</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--reports Interactive--sm" title="Reports icon"></span>
<span class="NavBar-text">Reports</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--games Interactive--sm" title="Games icon"></span>
<span class="NavBar-text">Games</span>
</a>
</li>
</ul>
</li>
<li class="NavBar-item">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--toDos" title="To Dos icon"></span>
<span class="NavBar-text">To Dos</span>
</a>
</li>
<li class="NavBar-item">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--timeTracker" title="Time Tracker icon"></span>
<span class="NavBar-text">Time Tracker</span>
</a>
</li>
<li class="NavBar-item NavBar-has-submenu">
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--people" title="People icon"></span>
<span class="NavBar-text">People</span>
</a>
<ul class="NavBar-submenu">
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--contacts Interactive--sm" title="Contacts icon"></span>
<span class="NavBar-text">Contacts</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--chat Interactive--sm" title="Chat icon"></span>
<span class="NavBar-text">Chats</span>
</a>
</li>
<li>
<a class="NavBar-link" href="#">
<span class="Interactive Interactive--list Interactive--sm" title="List icon"></span>
<span class="NavBar-text">Lists</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="NavBar-footer">
<a class="NavBar-link" href="#" title="Recycle Bin">
<span class="Interactive Interactive--trash"></span>
</a>
</div>
</div>
</header>
Progress
Progress Bar
20%
40%
60%
80%
100%
Progress Circular Bar
20%
40%
60%
80%
100%
Progress Sizes
Linear
20%
50%
80%
Circular
75%
75%
50%
Plain
Rounded
20%
<div class="section">
<h3>Progress Bar</h3>
<div class="section">
<div class="Progress Progress--primary" style="--progress-value: 20">
<div class="Progress-bar"></div>
<span class="Progress-text">20%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--secondary" style="--progress-value: 40">
<div class="Progress-bar"></div>
<span class="Progress-text">40%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--success" style="--progress-value: 60">
<div class="Progress-bar"></div>
<span class="Progress-text">60%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--info" style="--progress-value: 80">
<div class="Progress-bar"></div>
<span class="Progress-text">80%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--error" style="--progress-value: 100">
<div class="Progress-bar"></div>
<span class="Progress-text">100%</span>
</div>
</div>
<h3>Progress Circular Bar</h3>
<div class="row">
<div class="section">
<div class="Progress Progress--primary Progress--circular" style="--progress-value: 20">
<div class="Progress-bar"></div>
<span class="Progress-text">20%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--secondary Progress--circular" style="--progress-value: 40">
<div class="Progress-bar"></div>
<span class="Progress-text">40%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--success Progress--circular" style="--progress-value: 60">
<div class="Progress-bar"></div>
<span class="Progress-text">60%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--info Progress--circular" style="--progress-value: 80">
<div class="Progress-bar"></div>
<span class="Progress-text">80%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--error Progress--circular" style="--progress-value: 100">
<div class="Progress-bar"></div>
<span class="Progress-text">100%</span>
</div>
</div>
</div>
<h3>Progress Sizes</h3>
<h5>Linear</h5>
<div class="section">
<div class="Progress Progress--secondary Progress--linearSm" style="--progress-value: 20">
<div class="Progress-bar"></div>
<span class="Progress-text">20%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--success Progress--linearLg" style="--progress-value: 50">
<div class="Progress-bar"></div>
<span class="Progress-text">50%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--info Progress--linearXl" style="--progress-value: 80">
<div class="Progress-bar"></div>
<span class="Progress-text">80%</span>
</div>
</div>
<h5>Circular</h5>
<div class="row">
<div class="section">
<div class="Progress Progress--secondary Progress--circular Progress--circularSm" style="--progress-value: 75">
<div class="Progress-bar"></div>
<span class="Progress-text">75%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--success Progress--circular Progress--circularLg" style="--progress-value: 75">
<div class="Progress-bar"></div>
<span class="Progress-text">75%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--info Progress--circular Progress--circularXl" style="--progress-value: 25; --progress-maximum-value: 50">
<div class="Progress-bar"></div>
<span class="Progress-text">50%</span>
</div>
</div>
</div>
<h3>Plain</h3>
<div class="section">
<div class="Progress Progress--primary" style="--progress-value: 20">
<div class="Progress-bar"></div>
</div>
</div>
<h3>Rounded</h3>
<div class="section">
<div class="Progress Progress--primary Progress--rounded" style="--progress-value: 20">
<div class="Progress-bar"></div>
<span class="Progress-text">20%</span>
</div>
</div>
<div class="section">
<div class="Progress Progress--success Progress--rounded" style="--progress-value: 50">
<div class="Progress-bar"></div>
</div>
</div>
</div>
Range
<div class="section">
<div class="Range Range--primary" style="--range-value:50" data-range>
<input type="range" min="1" max="100" value="50" class="Range-input">
<span class="Range-track"></span>
</div>
</div>
<div class="section">
<div class="Range Range--secondary" style="--range-value:50" data-range>
<input type="range" min="1" max="100" value="50" class="Range-input">
<span class="Range-track"></span>
</div>
</div>
<div class="section">
<div class="Range Range--success" style="--range-value:50" data-range>
<input type="range" min="1" max="100" value="50" class="Range-input">
<span class="Range-track"></span>
</div>
</div>
<div class="section">
<div class="Range Range--error" style="--range-value:50" data-range>
<input type="range" min="1" max="100" value="50" class="Range-input">
<span class="Range-track"></span>
</div>
</div>
Rating
Worst
Good
Best
<div class="section">
<div class="Rating" data-rating>
<input type="hidden" value="0" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
Rating Variants
Worst
Good
Best
Worst
Good
Best
Worst
Good
Best
Worst
Good
Best
Worst
Good
Best
Worst
Good
Best
<div class="section">
<div class="Rating Rating-is-active Rating--primary" data-rating>
<input type="hidden" value="1" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating-is-active Rating--secondary" data-rating>
<input type="hidden" value="1" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating-is-active Rating--success" data-rating>
<input type="hidden" value="1" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating-is-active Rating--error" data-rating>
<input type="hidden" value="1" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating-is-active Rating--attention" data-rating>
<input type="hidden" value="1" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating-is-active Rating--neutral" data-rating>
<input type="hidden" value="1" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="1">
<span class="Rating-label">1</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-label">2</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-label">3</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-label">4</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-label">5</span>
</button>
<button type="button" class="Rating-button" data-rating-button="6">
<span class="Rating-label">6</span>
</button>
<button type="button" class="Rating-button" data-rating-button="7">
<span class="Rating-label">7</span>
</button>
<button type="button" class="Rating-button" data-rating-button="8">
<span class="Rating-label">8</span>
</button>
<button type="button" class="Rating-button" data-rating-button="9">
<span class="Rating-label">9</span>
</button>
<button type="button" class="Rating-button" data-rating-button="10">
<span class="Rating-label">10</span>
</button>
</div>
<div class="Rating-texts">
<span class="Rating-text">Worst</span>
<span class="Rating-text">Good</span>
<span class="Rating-text">Best</span>
</div>
</div>
</div>
Rating with icons
<div class="section">
<div class="Rating Rating--graphics" data-rating>
<input type="hidden" value="0" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button" data-rating-button="1">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating--graphics" data-rating>
<input type="hidden" value="0" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button" data-rating-button="1">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingCrown"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingCrown"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingCrown"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingCrown"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingCrown"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="section">
<div class="Rating Rating--graphics" data-rating>
<input type="hidden" value="0" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button" data-rating-button="1">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingSmiley"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingSmiley"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingSmiley"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingSmiley"></use>
</svg>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<svg class="Rating-icon Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingSmiley"></use>
</svg>
</button>
</div>
</div>
</div>
Rating with half
<div class="section">
<div class="Rating Rating--graphics Rating--half" data-rating>
<input type="hidden" value="0" data-rating-input />
<div class="Rating-buttons">
<button type="button" class="Rating-button" data-rating-button="1">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="3">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
Rating Read-Only
<div class="section">
<div class="Rating Rating-is-active Rating--graphics" data-rating>
<input type="hidden" value="3" data-rating-input readonly />
<div class="Rating-buttons Rating-buttons-is-readonly">
<button type="button" class="Rating-button" data-rating-button="1">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="2">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button Rating-button-is-active" data-rating-button="3">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="4">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
<button type="button" class="Rating-button" data-rating-button="5">
<span class="Rating-icon" data-rating-icon>
<svg class="Icon Icon--xxl" title="Rating Star" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
Select
The Select based on the Dropdown
Select
time in
Select shaded
all
Select shaded disabled
all
Variants:
primary
secondary disabled
success
neutral
attention
error
dark
light
<div class="section">
<h3>Select</h3>
<div class="row">
<div class="col-sm-2">
<div class="Select">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize Select-headerText">time in</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">time in</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time out</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<h3 class="capitalize">Select shaded</h3>
<div class="row">
<div class="col-sm-2">
<div class="Select Select--shaded">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">all</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time out</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<h3 class="capitalize">Select shaded disabled</h3>
<div class="row">
<div class="col-sm-2">
<div class="Select Select--shaded is-disabled">
<div class="Drop">
<div class="is-clickable Drop-header">
<span class="capitalize">all</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<h3 class="capitalize">Variants:</h3>
<div class="row row-range-12 is-margin-bottom">
<div class="col-sm-3">
<div class="Select Select--primary">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">primary</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Select Select--secondary is-disabled">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">secondary disabled</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Select Select--success">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">success</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Select Select--neutral">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">neutral</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row row-range-12 is-margin-bottom">
<div class="col-sm-3">
<div class="Select Select--attention">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">attention</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Select Select--error">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">error</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Select Select--dark">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">dark</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Select Select--light">
<div class="Drop" data-drop-direction="down">
<div class="Drop-toggle is-clickable Drop-header">
<span class="capitalize">light</span>
<svg class="Icon Drop-icon" title="arrow down icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
</div>
<div class="Drop-menu is-scrollable-y" data-drop-short>
<ul class="Select-items">
<li>
<button class="Drop-item Drop-item-is-selected" type="button">
<span class="capitalize">all</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">date</span>
</button>
</li>
<li>
<button class="Drop-item" type="button">
<span class="capitalize">time in</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Sidebar
The Sidebar component is a vertical menu bar that appears as a column to the left or right. It is composed of the following structure:
Additional Classes
- 'Sidebar-is-fixed-top-right' is used to position the sidebar on the top right of the page.
- 'Sidebar-is-fixed-bottom-right' is used to position the sidebar on the bottom right of the page.
- 'Sidebar--reverse is used to reverse the order of list items on the sidebar.
<aside class="Sidebar">
<div class="Sidebar-menu">
<ul class="Sidebar-list">
<li class="Sidebar-item">
<a class="Sidebar-link" href="#">
<span class="Interactive Interactive--help" title="Help icon"></span>
</a>
</li>
<li class="Sidebar-item">
<a class="Sidebar-link" href="#">
<span class="Interactive Interactive--notifications" title="Notifications icon"></span>
</a>
</li>
<li class="Sidebar-item">
<a class="Sidebar-link" href="#">
<span class="Interactive Interactive--inviteMembers" title="Invite Members icon"></span>
</a>
</li>
</ul>
</div>
<div class="Sidebar-menu Sidebar--reverse">
<ul class="Sidebar-list">
<li class="Sidebar-item">
<a class="Sidebar-link" href="#">
<span class="Interactive Interactive--newMessage" title="New Message icon"></span>
</a>
</li>
</ul>
</div>
</aside>
Slider
Slider can be positioned on either the left (default) or right of the viewport or relative box
Slider
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.
Footer
Right Slider
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.
Footer
Slider in the Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.
Footer
<button class="Btn Btn--primary" data-slider-target="slider-1">Show the default Slider</button>
<button class="Btn Btn--success" data-slider-target="slider-2" data-slider-direction="right">Show the right Slider</button>
<button class="Btn Btn--neutral" data-slider-target="slider-3">Show the Slider in the Box</button>
<button class="Btn Btn--dark" data-slider-target="slider-3" data-slider-keep data-slider-direction="right">Keep the Slider in the Box</button>
<div class="Slider Slider--fixed" data-slider="slider-1">
<div class="row is-full-width is-full-height vertical nowrap noGutters">
<div class="row middle-sm is-padding-y-sm is-padding-x-xxxl noGutters">
<div class="col col-sm-grow-1">Slider</div>
<button class="TypeBtn" data-slider-dismiss>
<svg class="Icon Icon--lg" role="img">
<use xlink:href="#collapseRight"></use>
</svg>
</button>
</div>
<div class="Divider is-padding-none"></div>
<div class="col col-sm-grow-1 is-scrollable is-margin-y-sm is-padding-x-xxxl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
</div>
<div class="Divider is-padding-none"></div>
<div class="is-padding-y-sm is-padding-x-xxxl">
Footer
</div>
</div>
</div>
<div class="Slider Slider--fixed" data-slider="slider-2">
<div class="row is-full-width is-full-height vertical nowrap noGutters">
<div class="row middle-sm is-padding-y-sm is-padding-x-xxxl noGutters">
<div class="col col-sm-grow-1">Right Slider</div>
<button class="TypeBtn" data-slider-dismiss>
<svg class="Icon Icon--lg" role="img">
<use xlink:href="#collapseRight"></use>
</svg>
</button>
</div>
<div class="Divider is-padding-none"></div>
<div class="col col-sm-grow-1 is-scrollable is-margin-y-sm is-padding-x-xxxl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.</p>
</div>
<div class="Divider is-padding-none"></div>
<div class="is-padding-y-sm is-padding-x-xxxl">
Footer
</div>
</div>
</div>
<div class="is-relative is-margin-top" style="height:40vh;background-color:lightyellow;">
<div class="Slider" data-slider="slider-3">
<div class="row is-full-width is-full-height vertical nowrap noGutters">
<div class="row middle-sm is-padding-y-sm is-padding-x-xxxl noGutters">
<div class="col col-sm-grow-1">Slider in the Box</div>
<button class="TypeBtn" data-slider-dismiss>
<svg class="Icon Icon--lg" role="img">
<use xlink:href="#collapseRight"></use>
</svg>
</button>
</div>
<div class="Divider is-padding-none"></div>
<div class="col col-sm-grow-1 is-scrollable is-margin-y-sm is-padding-x-xxxl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.</p>
</div>
<div class="Divider is-padding-none"></div>
<div class="is-padding-y-sm is-padding-x-xxxl">
Footer
</div>
</div>
</div>
</div>
Tabs
The Tabs are used to create a tabbable panes. This is where content are separated into different panes, and each pane is viewable one at a time.
Basic
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
Variant pills
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
Variant underline
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
Dark
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella
Sharp
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella
<h2>Basic</h2>
<div class="section">
<nav class="Tab" data-tab="TabContents1">
<ul class="Tab-menu" data-tab-menu>
<li class="Tab-item Tab-is-active" data-tab-target="TabContent1">
<a class="Tab-link" href="#">
<span class="Tab-text">
Appearance
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContent2">
<a class="Tab-link" href="#">
<span class="Tab-text">
Style
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContent3">
<a class="Tab-link" href="#">
<span class="Tab-text">
Display
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="section">
<div class="Tab-contents" data-tab-contents="TabContents1">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content="TabContent1">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</div>
<div class="Tab-content" data-tab-content="TabContent2">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
<div class="Tab-content" data-tab-content="TabContent3">
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
</div>
</div>
</div>
<h2>Variant pills</h2>
<div class="section">
<nav class="Tab Tab--pills" data-tab="TabContentsSecondary">
<ul class="Tab-menu" data-tab-menu>
<li class="Tab-item Tab-is-active" data-tab-target="TabContentS1">
<a class="Tab-link" href="#">
<span class="Tab-text">
Appearance
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContentS2">
<a class="Tab-link" href="#">
<span class="Tab-text">
Style
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContentS3">
<a class="Tab-link" href="#">
<span class="Tab-text">
Display
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="section">
<div class="Tab-contents" data-tab-contents="TabContentsSecondary">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content="TabContentS1">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</div>
<div class="Tab-content" data-tab-content="TabContentS2">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
<div class="Tab-content" data-tab-content="TabContentS3">
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
</div>
</div>
</div>
<h2>Variant underline</h2>
<div class="section">
<nav class="Tab Tab--underline Tab--sharp" data-tab="TabContentsUnderline">
<ul class="Tab-menu" data-tab-menu>
<li class="Tab-item Tab-is-active" data-tab-target="TabContentU1">
<a class="Tab-link" href="#">
<span class="Tab-text">
Appearance
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContentU2">
<a class="Tab-link" href="#">
<span class="Tab-text">
Style
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContentU3">
<a class="Tab-link" href="#">
<span class="Tab-text">
Display
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="section">
<div class="Tab-contents" data-tab-contents="TabContentsUnderline">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content="TabContentU1">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</div>
<div class="Tab-content" data-tab-content="TabContentU2">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
<div class="Tab-content" data-tab-content="TabContentU3">
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
</div>
</div>
</div>
<h2>Dark</h2>
<div class="section">
<nav class="Tab Tab--dark" data-tab="TabContents2">
<ul class="Tab-menu" data-tab-menu>
<li class="Tab-item Tab-is-active" data-tab-target="TabContent3">
<a class="Tab-link" href="#">
<span class="Tab-text">
DASHBOARDS
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContent4">
<a class="Tab-link" href="#">
<span class="Tab-text">
WIDGETS
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="section">
<div class="Tab-contents" data-tab-contents="TabContents2">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content="TabContent3">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
</div>
<div class="Tab-content" data-tab-content="TabContent4">
hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella
</div>
</div>
</div>
<h2>Sharp</h2>
<div class="section">
<nav class="Tab Tab--dark Tab--sharp" data-tab="TabContents3">
<ul class="Tab-menu" data-tab-menu>
<li class="Tab-item Tab-is-active" data-tab-target="TabContent5">
<a class="Tab-link" href="#">
<span class="Tab-text">
DASHBOARDS
</span>
</a>
</li>
<li class="Tab-item" data-tab-target="TabContent6">
<a class="Tab-link" href="#">
<span class="Tab-text">
WIDGETS
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="section">
<div class="Tab-contents" data-tab-contents="TabContents3">
<div class="Tab-content Tab-is-shown Tab-is-faded" data-tab-content="TabContent5">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
</div>
<div class="Tab-content" data-tab-content="TabContent6">
hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella
</div>
</div>
</div>
Tooltip
A message which appears when a cursor is positioned over an element.
<button class="Btn Btn--primary" data-tooltip data-tooltip-position="top" title="Tooltip on Top">Tooltip on Top</button>
<button class="Btn Btn--primary" data-tooltip data-tooltip-position="bottom" title="Tooltip on Bottom">Tooltip on Bottom</button>
<button class="Btn Btn--primary" data-tooltip data-tooltip-position="left" title="Tooltip on Left">Tooltip on Left</button>
<button class="Btn Btn--primary" data-tooltip data-tooltip-position="right" title="Tooltip on Right">Tooltip on Right</button>
Tooltip with content
Hello World!!!
Tooltip with content
<button class="Btn Btn--primary" data-tooltip data-tooltip-position="top" data-tooltip-content-id="UNIQUE_ID" title="">Tooltip on Top</button>
<div data-tooltip-content="UNIQUE_ID" class="is-hidden">
<h4>Hello World!!!</h4>
<p>Tooltip with <b>content</b></p>
</div>
Top Nav
The TopNav component is a horizontal navigation menu bar. It is composed of the following structure:
TopNavthe main class around the topnav component.TopNav-navthe navigation menu containerTopNav-brandthe left-side of the main container which is always visible and usually contains the brand logo (BrandLogocomponent)TopNav-togglethe toggle button that open and closes the topnav menu on tablet and mobile devices.TopNav-iconthe menu icon that is displayed on the toggle button.
TopNav-menuthe right-side of the main container that hold the menu items.TopNav-primarythe container for primary menu items on the right.
The primary menu has the following structure:
TopNav-itemthe top-level items on the topnav, this can be an<a>or<div>.
If you want to keep the TopNav stuck to the top of the browser then apply TopNav-is-fixed to the <header> element.
<header class="TopNav">
<nav class="TopNav-nav" role="navigation" aria-label="main navigation" data-topnav>
<div class="TopNav-content container">
<div class="TopNav-brand">
<a class="TopNav-item BrandLogo" href="/" title="Knit">
</a>
<button class="TopNav-toggle" aria-label="menu" aria-expanded="false" data-topnav-toggle>
<div class="TopNav-icon"></div>
</button>
</div>
<div class="TopNav-menu">
<div class="TopNav-primary">
<a class="TopNav-item" href="#">
Features
</a>
<a class="TopNav-item" href="#">
Training
</a>
<a class="TopNav-item" href="#">
Pricing
</a>
<a class="TopNav-item" href="#">
Log in
</a>
</div>
</div>
</div>
</nav>
<div class="Navbar-overlay"></div>
</header>
Top Sub Nav
The TopSubNav component is a horizontal navigation sub-menu bar.
<nav class="TopSubNav TopSubNav-nav">
<ul class="TopSubNav-menu">
<li class="TopSubNav-item TopSubNav-is-active">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--weaves Interactive--sm" title="Weaves icon"></span>
<span class="TopSubNav-text">
Weaves
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--kpi Interactive--sm" title="KPI icon"></span>
<span class="TopSubNav-text">
KPI
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--notes Interactive--sm" title="Notes icon"></span>
<span class="TopSubNav-text">
Notes
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--tickets Interactive--sm" title="Tickets icon"></span>
<span class="TopSubNav-text">
Tickets
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--calendar Interactive--sm" title="Calendar icon"></span>
<span class="TopSubNav-text">
Calendar
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--kanban Interactive--sm" title="Kanban icon"></span>
<span class="TopSubNav-text">
Kanban
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--gantt Interactive--sm" title="Gantt icon"></span>
<span class="TopSubNav-text">
Gantt
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--reports Interactive--sm" title="Reports icon"></span>
<span class="TopSubNav-text">
Reports
</span>
</a>
</li>
<li class="TopSubNav-item">
<a class="TopSubNav-link" href="#">
<span class="Interactive Interactive--games Interactive--sm" title="Games icon"></span>
<span class="TopSubNav-text">
Games
</span>
</a>
</li>
</ul>
</nav>
Walkthrough Wizard
This is step 1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.
This is step One
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.
This is step Two
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.
This is step Three
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.
USE OUR TEMPLATES
START FROM SCRATCH
START NOW
<div class="section section-centered" id="ww-object-main">
<div class="Callout">
<h2>This is step 1</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.</p>
<button class="Btn Btn--primary" data-walkthroughwizard-target="walkthrough-wizard-1">
Show walkthrough Wizard
</button>
</div>
</div>
<div class="WalkthroughWizard" data-walkthroughwizard data-walkthroughwizard-id="walkthrough-wizard-1" data-walkthroughwizard-alignTo="#ww-object-main">
<div class="WalkthroughWizard-step" data-walkthroughwizard-step data-walkthroughwizard-mark="#ww-box-1" data-walkthroughwizard-arrow="left">
<div class="section-centered">
<div class="Callout">
<h2>This is step One</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.</p>
<button class="Btn Btn--primary" data-walkthroughwizard-next>Next step</button>
</div>
</div>
</div>
<div class="WalkthroughWizard-step" data-walkthroughwizard-step data-walkthroughwizard-mark="#ww-box-2" data-walkthroughwizard-arrow="bottom">
<div class="section-centered">
<div class="Callout">
<h2>This is step Two</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.</p>
<button class="Btn Btn--primary" data-walkthroughwizard-prev>Previous step</button>
<button class="Btn Btn--primary" data-walkthroughwizard-next>Next step</button>
</div>
</div>
</div>
<div class="WalkthroughWizard-step" data-walkthroughwizard-step data-walkthroughwizard-mark="#ww-box-3" data-walkthroughwizard-arrow="right">
<div class="section-centered">
<div class="Callout">
<h2>This is step Three</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem libero officia quis, veritatis voluptas. Dicta consequuntur adipisci non omnis.</p>
<button class="Btn Btn--primary" data-walkthroughwizard-prev>Previous step</button>
</div>
</div>
</div>
</div>
<div class="section">
<div class="row center-sm">
<div class="col-sm-2">
<div class="Card Card--primary Card--touch" alt="Organise Tasks" id="ww-box-1">
<div class="Card-content">
<img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
</div>
<div class="Card-content section-reverse">
<h3>USE OUR TEMPLATES</h3>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="Card Card--secondary Card--touch" alt="Organise Tasks" id="ww-box-2">
<div class="Card-content">
<img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
</div>
<div class="Card-content section-reverse">
<h3>START FROM SCRATCH</h3>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="Card Card--neutral Card--touch" alt="Organise Tasks" id="ww-box-3">
<div class="Card-content">
<img class="img-semifluid" src="../styles/img/shared/templateDashboard.svg"/>
</div>
<div class="Card-content section-reverse">
<h3>START NOW</h3>
</div>
</div>
</div>
</div>
</div>