Tab 1 section
Patterns
Patterns are specific UI schemes that use a collection of components and pattern-specific css to solve a common design problem. Patterns can either stand alone entirely as markup, or be dependent on JavaScript to accomplish certain behaviors.
To use a pattern, follow the structures defined in the sample code.
Top Nav
Top navigation is the primary, header level navigation for a web site. It contains the root level pages, user logins, and the site title. The main navigation should be hidden on screen sizes smaller than the size of the navigation. This navigation should be moved to an off-screen drawer on the left hand side. Notice the separate div elements with tablet-hide and tablet-show classes in the sample below.
<header class="top-nav fade-in">
<div class="grid-container">
<div class="column-24">
<div class="tablet-hide">
<a class="skip-to-content" href="#skip-to-content">Skip To Content</a>
<a href="#" class="top-nav-title">ArcGIS for Developers</a>
<nav class="top-nav-list" role="navigation" aria-labelledby="topnav">
<!-- <a class="top-nav-link" href="#">Dashboard</a> -->
<a class="top-nav-link" href="#">Plans</a>
<a class="top-nav-link" href="#">Community</a>
<a class="top-nav-link" href="#">Docs</a>
</nav>
<nav class="class-top-nav-list right" role="navigation" aria-labelledby="usernav">
<button class="icon-ui-search search-top-nav link-dark-gray js-search-toggle" href="#" aria-label="Search">Search</button>
<a class="top-nav-link icon-ui-user margin-left-1" href="#">Sign In</a>
<a class="btn btn-clear margin-left-1" href="#">Sign Up</a>
</nav>
</div>
<div class="tablet-show top-nav-flex">
<nav class="top-nav-flex-list" role="navigation" aria-labelledby="topnav">
<a href="/" class="icon-ui-menu top-nav-link js-drawer-toggle" data-drawer="left"><span class="phone-hide">Menu</span></a>
</nav>
<header class="top-nav-flex-title">
<a href="/" class="top-nav-link">ArcGIS <span class="phone-hide">for Developers</span></a>
</header>
<nav class="top-nav-flex-list text-right" role="navigation" aria-labelledby="usernav">
<button class="icon-ui-search phone-hide search-top-nav link-dark-gray js-search-toggle" href="#" aria-label="Search">Search</button>
<button class="icon-ui-search icon-ui-flush phone-show search-top-nav link-dark-gray js-search-toggle" href="#" aria-label="Search"></button>
<a class="top-nav-link icon-ui-user icon-ui-flush margin-left-1" href="#" aria-label="Sign In"><span class="margin-left-half phone-hide">Sign In</span></a>
<!-- <a class="top-nav-link icon-ui-user icon-ui-flush margin-left-1 js-drawer-toggle" data-drawer="right" href="#" aria-label="Sign In"><span class="margin-left-half phone-hide">Sign In</span></a> -->
</nav>
</div>
</div>
</div>
</header>
User Sign In
Designed to be combined with the top navigation pattern on sites where a logged in portion is accessible. Once a use is logged in, it should be replaced with the user navigation pattern.
<nav class="class-top-nav-list right" role="navigation" aria-labelledby="usernav">
<a class="top-nav-link icon-ui-user margin-left-1" href="#">Sign In</a>
<a class="btn btn-clear margin-left-1" href="#">Sign Up</a>
</nav>
User Nav
Designed to be combined with the user sign in pattern pattern on sites where a logged in portion is accessible.
The user navigation element is just a dropdown with a few special styles.
<div class="dropdown js-dropdown right">
<a class="top-nav-link icon-ui-user margin-left-1 js-dropdown-toggle" tabindex="0" aria-haspopup="true" aria-expanded="false" href="#">User</a>
<nav class="dropdown-menu dropdown-right" role="menu">
<span class="dropdown-title">
User Name
<br>
<small>username</small>
</span>
<a href="#" class="dropdown-link" role="menu-item">Dashboard</a>
<a href="#" class="dropdown-link" role="menu-item">Account</a>
<a href="#" class="dropdown-link" role="menu-item">Support</a>
<a href="#" class="dropdown-link" role="menu-item">Feedback</a>
<a href="#" class="dropdown-link" role="menu-item">Sign Out</a>
</nav>
</div>
Sub Nav
The 'Sub-Nav' provides a second level of hierarchy to a site. While the top-nav includes the top-most level of navigation, the sub-nav includes navigation for sections nested inside that. The subnav has a tabbed navigation pattern, a title, and room for a call to action.
You can also turn the sub-nav into a more graphically-driven banner by adding padding-leader and padding-trailer classes to the title, thereby increasing the vertical size of the sub-nav.
Fields
<header class="sub-nav" role="banner">
<div class="grid-container">
<div class="column-24">
<h1 class="sub-nav-title text-white">Fields</h1>
<nav class="sub-nav-list" role="navigation" aria-labelledby="subnav">
<a class="sub-nav-link" href="#">Glens</a>
<a class="sub-nav-link" href="#">Dales</a>
<a class="sub-nav-link is-active" href="#">Meadows</a>
</nav>
</div>
</div>
</header>
Responsive Sub Nav
When a sub nav has more than two or three items in it, it may need to collapse down into a smaller space on smaller screen sizes. The following pattern will work within an app, with tablet-show or phone-show used as needed.
Fields
<header class="sub-nav" role="banner">
<div class="grid-container">
<div class="column-24">
<h1 class="sub-nav-title text-white">Fields</h1>
<select class="phone-show select-full trailer-half js-select-nav">
<option value="#">Glens</option>
<option value="#">Dales</option>
<option value="#" selected>Meadows</option>
</select>
<nav class="sub-nav-list phone-hide" role="navigation" aria-labelledby="subnav">
<a class="sub-nav-link" href="#">Glens</a>
<a class="sub-nav-link" href="#">Dales</a>
<a class="sub-nav-link is-active" href="#">Meadows</a>
</nav>
</div>
</div>
</header>
Hero
A Hero is an implementation of the Sub Nav pattern that allows for a big, splashy image and headline. A Hero can be accomplished entirely with markup, as below.
Heros
Don't forget Breakfast Princess, Emerald Princess, Engagement Ring Princess, Flame Princess, Ghost Princess, Hot Dog Princess, Lumpy Space Princess, Muscle Princess, Princess Bubblegum, Raggedy Princess, Skeleton Princess, Slime Princess, Turtle Princess, Wildberry Princess, Bee Princess, Bounce House Princess, Cotton Candy Princess, Crab Princess, Frozen Yogurt Princess, Elbow Princess, Embryo Princess, Gridface Princess, Jungle Princess, Laurel Princess, Lizard Princess, Old Lady Princess, Peanut Princess, Princess Beautiful, Princess Monster Wife, Princess Princess Princess, Purple Princess, Space Angel Princess, Strudel Princess, and Toast Princess.
<header class="sub-nav" role="banner">
<div class="grid-container">
<div class="column-24">
<nav class="breadcrumbs breadcrumbs-white leader-1">
<a href="#" class="crumb">Heros</a>
<a href="#" class="crumb">Animated</a>
<a href="#" class="crumb is-active">Adventure Time</a>
</nav>
</div>
<div class="column-24 first-column">
<h1 class="sub-nav-title text-white leader-3">Heros</h1>
<p class="trailer-4 text-white">Don't forget Breakfast Princess, Emerald Princess, Engagement Ring Princess, Flame Princess, Ghost Princess, Hot Dog Princess, Lumpy Space Princess, Muscle Princess, Princess Bubblegum, Raggedy Princess, Skeleton Princess, Slime Princess, Turtle Princess, Wildberry Princess, Bee Princess, Bounce House Princess, Cotton Candy Princess, Crab Princess, Frozen Yogurt Princess, Elbow Princess, Embryo Princess, Gridface Princess, Jungle Princess, Laurel Princess, Lizard Princess, Old Lady Princess, Peanut Princess, Princess Beautiful, Princess Monster Wife, Princess Princess Princess, Purple Princess, Space Angel Princess, Strudel Princess, and Toast Princess.</p>
<nav class="sub-nav-list" role="navigation" aria-labelledby="subnav">
<a class="sub-nav-link is-active" href="#">Jake the Dog</a>
<a class="sub-nav-link" href="#">Finn the Human</a>
</nav>
</div>
</div>
</header>
Third Nav
Tertiary navigation is necessary only when the information architecture of the site requires three levels of hierarchy within pages. A breadcrumb component can also be used in this pattern.
<header class="third-nav">
<div class="third-nav-container">
<div class="grid-container">
<nav class="column-24" role="navigation" aria-labelledby="thirdnav">
<a class="third-nav-link is-active" href="#">Alpine</a>
<a class="third-nav-link" href="#">Coastal</a>
<a class="third-nav-link" href="#">Wetland</a>
<a class="third-nav-link" href="#">Grassland</a>
<a class="third-nav-link" href="#">Praire</a>
</nav>
</div>
</div>
</header>
Side Nav
Sidebar can be used either for in-page navigation — like on this page — or for lists of articles under a given topic.
<aside class="side-nav" aria-role="complementary">
<h4 class="side-nav-title">Sidenav Group</h4>
<nav role="navigation" aria-labelledby="sidenav">
<a href="#" class="side-nav-link">Agricultural</a>
<a href="#" class="side-nav-link">Transition</a>
<a href="#" class="side-nav-link">Perpetual</a>
<a href="#" class="side-nav-link">Cultural</a>
</nav>
</aside>
Footer
Standard footer for ArcGIS and Esri properties. The footer in Calcite Web is 'sticky' by default. This means that if the page doesn't have sufficient height, the footer will still hug the bottom of the screen. For this to work properly, you must use a div with a class of wrapper. See the basic HTML page for an example.
<footer class="footer leader-3">
<div class="grid-container">
<nav class="column-8">
<h6 class="font-size-5"><strong>esri</strong></h6>
<ul class="list-plain font-size--2">
<li><strong>Talk With Us</strong></li>
<li><a class="link-off-black" href="#">Contact Sales</a></li>
<li><a class="link-off-black" href="#">Contact Support</a></li>
</ul>
<p class="leader-1 font-size--2"><strong>Follow Us</strong></span></p>
<section class="footer-social-nav">
<a class="icon-social-twitter" href="https://twitter.com/Esri/"></a>
<a class="icon-social-facebook" href="https://www.facebook.com/esrigis/"></a>
<a class="icon-social-youtube" href="https://www.youtube.com/esrigis/"></a>
<a class="icon-social-github" href="http://esri.github.com/"></a>
<a class="icon-social-linkedin" href="https://www.linkedin.com/company/5311"></a>
<a class="icon-social-contact" href="http://www.esri.com/about-esri/contact/"></a>
</section>
</nav>
<nav class="column-4 leader-1">
<h6 class="font-size--2"><strong>Arc<span>GIS</span></strong></h6>
<ul class="list-plain font-size--2">
<li><a class="link-off-black" href="#">About ArcGIS</a></li>
<li><a class="link-off-black" href="#">ArcGIS Desktop</a></li>
<li><a class="link-off-black" href="#">ArcGIS Server</a></li>
<li><a class="link-off-black" href="#">ArcGIS Online</a></li>
<li><a class="link-off-black" href="#">Apps</a></li>
<li><a class="link-off-black" href="#">How to Buy</a></li>
</ul>
</nav>
<nav class="column-4 leader-1">
<h6 class="font-size--2"><strong>Community</strong></h6>
<ul class="list-plain font-size--2">
<li><a class="link-off-black" href="#">Esri Community</a></li>
<li><a class="link-off-black" href="#">Events</a></li>
<li><a class="link-off-black" href="#">Education</a></li>
<li><a class="link-off-black" href="#">Early Adopters</a></li>
<li><a class="link-off-black" href="#">Developers</a></li>
</ul>
</nav>
<nav class="column-4 leader-1">
<h6 class="font-size--2"><strong>Understanding GIS</strong></h6>
<ul class="list-plain font-size--2">
<li><a class="link-off-black" href="#">What is GIS</a></li>
<li><a class="link-off-black" href="#">Training</a></li>
<li><a class="link-off-black" href="#">Events</a></li>
<li><a class="link-off-black" href="#">Insights</a></li>
<li><a class="link-off-black" href="#">Esri Press</a></li>
</ul>
</nav>
<nav class="column-4 leader-1">
<h6 class="font-size--2"><strong>Company</strong></h6>
<ul class="list-plain font-size--2">
<li><a class="link-off-black" href="#">About Esri</a></li>
<li><a class="link-off-black" href="#">Contact Us</a></li>
<li><a class="link-off-black" href="#">Careers</a></li>
<li><a class="link-off-black" href="#">Worldwide Distributors</a></li>
<li><a class="link-off-black" href="#">Partners</a></li>
<li><a class="link-off-black" href="#">Disaster Response Program</a></li>
</ul>
</nav>
<div class="column-24">
<hr>
<div class="column-8">
<p>United States (English) <span class="icon-ui-globe"></span></p>
</div>
<div class="column-16 font-size--2">
<a class="link-off-black margin-right-4" href="#">Privacy</a>
<a class="link-off-black margin-right-4" href="#">Legal</a>
<a class="link-off-black margin-right-4" href="#">Site Map</a>
<a class="link-off-black margin-right-4" href="#">Terms and Conditions</a>
</div>
</div>
</div>
</footer>
Pagination
Use the pagination pattern to navigate between pages of displayed content, either in a gallery or a search result view.
<div class="text-center trailer-1 leader-1">
<a href="#" class="btn btn-transparent btn-disabled">Previous</a>
<a href="#" class="btn">1</a>
<a href="#" class="btn btn-transparent">2</a>
<a href="#" class="btn btn-transparent">3</a>
<span class="avenir-light text-light-gray">...</span>
<a href="#" class="btn btn-transparent">20</a>
<a href="#" class="btn btn-transparent btn-arrow">Next</a>
</div>
Interactive Patterns
Interactive patterns rely on calcite-web.js to work properly. You must add a reference to calcite-web.js. After that, you should startup all the interactive patterns on load with calcite.init().
For more on using calcite-web.js you can view the JavaScript Documentation.
Modals
Modals are meant to "take over" the screen and focus users attention on a dialog which presents the user with an opportunity to add, modify or create content. A modal should always be centered both vertically and horizontally within the browser window. When a modal is opened, the interface darkens and disables all other user interface elements in order to force a user to take an action required by their workflow. Two modals can't be open at once.
To create a link or button that opens a modal, you must add a js-modal-toggle class to the element, along with a data-modal attribute specifying the name of the modal that should open. The modal should also get a data-modal attribute with the same name.
Elements with the js-modal-toggle that are inside a modal don't need the data-modal attribute as they will just close the modal they are in.
<div class="js-modal modal-overlay modifier-class" data-modal="foo">
<div class="modal-content column-12" role="dialog" aria-labelledby="modal" role="dialog">
<a class="js-modal-toggle right" href="#" aria-label="close-modal">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 32 32" class="svg-icon"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<h3 class='trailer-half'>Modal!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="text-right">
<button class="btn js-modal-toggle">okay</button>
<button class="btn btn-clear js-modal-toggle">cancel</button>
</div>
</div>
</div>
<div class="js-modal modal-overlay modifier-class" data-modal="baz">
<div class="modal-content column-12" role="dialog" aria-labelledby="modal" role="dialog">
<a class="js-modal-toggle right" href="#" aria-label="close-modal">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 32 32" class="svg-icon"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<h3 class='trailer-half'>Another Modal!</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="text-right">
<button class="btn js-modal-toggle">okay</button>
<button class="btn btn-clear js-modal-toggle">cancel</button>
</div>
</div>
</div>
<a class="js-modal-toggle btn" href="#" data-modal="foo"><span>Show Modal</span></a>
<a class="js-modal-toggle btn" href="#" data-modal="baz">Show Another Modal</a>
Tabs
The framework includes a quick set of styles for a tabbed interface pattern. The full tab container will expand to fit its parent.
As an added bonus, this component supports intelligently restricting the width of tabs if they get too long and numerous.
tabs-gray can be used to display code samples. Just wrap code blocks in <pre> and <code> tags inside the element with .tab-section class.
Base
Tab 2 section
Tab 3 section
<div class="modifier-class trailer-2 js-tab-group">
<nav class="tab-nav">
<a class="tab-title is-active js-tab">Tab 1</a>
<a class="tab-title js-tab">Tab 2</a>
<a class="tab-title js-tab">Tab 3 <span> ☼ </span></a>
</nav>
<section class="tab-contents">
<article class="tab-section js-tab-section is-active">
<p>Tab 1 section</p>
</article>
<article class="tab-section js-tab-section">
<p>Tab 2 section</p>
</article>
<article class="tab-section js-tab-section">
<p>Tab 3 section</p>
</article>
</section>
</div>
Modifiers
Tab 1 section
Tab 2 section
Tab 3 section
.tabs-gray
Tab 1 section
Tab 2 section
Tab 3 section
.tabs-transparent
Tab 1 section
Tab 2 section
Tab 3 section
.tabs-translucent
Tab 1 section
Tab 2 section
Tab 3 section
.tabs-dark
Accordions
The js-accordion class provides the JavaScript binding for the accordion pattern, which handles which pane of the accordion is active via the is-active class.
Note: Accordions have recently moved to using inline svg icons. If you're still using the icon font, simply set $include-svg-icon to false and omit the accordion-icon element.
<aside class="js-accordion accordion">
<div class="accordion-section is-active">
<h4 class="accordion-title">
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
</span>
Title of Section
</h4>
<div class="accordion-content">
<p>Stuff!</p>
</div>
</div>
<div class="accordion-section">
<h4 class="accordion-title">
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
</span>
Title of Second Section
</h4>
<div class="accordion-content">
<p>Stuff!</p>
</div>
</div>
<div class="accordion-section">
<h4 class="accordion-title">
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
</span>
Title of Third Section
</h4>
<div class="accordion-content">
<p>Stuff!</p>
</div>
</div>
</aside>
Drawers
The off-canvas "drawer" pattern is used primarily for top-level mobile navigation.
<body>
<!-- Drawer -->
<div class="drawer drawer-left js-drawer is-active" data-drawer="top-nav" tabindex="0">
<nav class="drawer-nav" role="navigation">
<aside class="side-nav">
<h2 class="side-nav-title">Calcite Web</h2>
<a href="/" class="side-nav-link">Get Started</a>
<a href="/" class="side-nav-link">Type</a>
<a href="/" class="side-nav-link">Grid</a>
<a href="/" class="side-nav-link">Icons</a>
<a href="/" class="side-nav-link">Color</a>
<a href="/" class="side-nav-link">Components</a>
<a href="/" class="side-nav-link">Patterns</a>
<a href="/" class="side-nav-link">Sass</a>
<a href="/" class="side-nav-link">JavaScript</a>
<a href="/" class="side-nav-link">Layouts</a>
</aside>
</nav>
</div>
<!-- Main Content Wrapper -->
<div class="wrapper">
<!-- ...all site content goes here... -->
</div>
</body>
Search
The search pattern is a a UI for site-wide searches. The most regular use of the pattern is in the Top Navigation pattern.
<div class="js-search search-overlay">
<div class="search-content" role="dialog" aria-labelledby="search" role="dialog">
<form method="GET" action="../../search/">
<label>
Search Your Site
<input class="search-input js-search-input" type='search' placeholder='Search' name="q">
</label>
<!-- a few options can also be defined by the user in the search popup, if desired -->
<label class="inline-block margin-right-2">
Language
<select name="language">
<option value="">All Languages</option>
<option value="">Android</option>
<option value="">iOS (Swift)</option>
<option value="">iOS (Objective C)</option>
<option value="">Java</option>
<option value="">JavaScript</option>
<option value="">Mac OS X (Swift)</option>
<option value="">Mac OS X (Objective C)</option>
<option value="">Qt (QML)</option>
<option value="">Qt (C++)</option>
<option value="">REST APIs</option>
<option value="">Web AppBuilder</option>
<option value="">.Net (Desktop)</option>
<option value="">.Net (Store)</option>
<option value="">.Net (Phone)</option>
<option value="">.Net (WPF)</option>
<option value="">.Net (UWP)</option>
</select>
</label>
<label class="inline-block margin-right-2">
Version
<select name="version">
<option value="">All Versions</option>
<option value="1.0.0">10.3</option>
<option value="2.0.0">10.4</option>
<option value="3.0.0">Quartz</option>
</select>
</label>
<!-- end options -->
<button type="submit" class="btn btn-large right">Search</button>
</form>
</div>
</div>
<button class="search-top-nav link-dark-gray js-search-toggle" href="#" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 -4 32 36" class="svg-icon js-search-icon">
<path d="M31.607 27.838l-6.133-6.137a1.336 1.336 0 0 0-1.887 0l-.035.035-2.533-2.533-.014.014c3.652-4.556 3.422-11.195-.803-15.42-4.529-4.527-11.875-4.531-16.404 0-4.531 4.531-4.529 11.875 0 16.406 4.205 4.204 10.811 4.455 15.365.848l.004.003-.033.033 2.541 2.54a1.33 1.33 0 0 0 .025 1.848l6.135 6.133a1.33 1.33 0 0 0 1.887 0l1.885-1.883a1.332 1.332 0 0 0 0-1.887zM17.811 17.809a8.213 8.213 0 0 1-11.619 0 8.217 8.217 0 0 1 0-11.622 8.219 8.219 0 0 1 11.619.004 8.216 8.216 0 0 1 0 11.618z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 -4 32 36" class="svg-icon js-close-icon hide">
<path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"></path>
</svg>
</button>
Filter Dropdown
The filter dropdown is a component used to select any number of items from a list of any number of options. It's used to locate specific items quickly even if that item is buried in a huge pile of other things.
The primary use cases for the filter dropdown are selecting tags from a tag cloud, or a group from a list of all a user's groups.
If the relationship being established is many-to-many, use the filter dropdown component.
<section class="js-filter-dropdown trailer-4" data-filter-dropdown="sections">
<header>
<h6 class="filter-dropdown-title">Sections</h6>
<a class="js-filter-dropdown-open filter-dropdown-action is-active" href="#">edit</a>
<a class="js-filter-dropdown-close filter-dropdown-action" href="#">done</a>
</header>
<label class="trailer-half filter-dropdown-container">
<div class="filter-dropdown-list modifier-class">
<input class="filter-dropdown-input" type="text" placeholder="Filter by Section">
<div class="filter-dropdown-inner-list">
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Get Started
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Contributing
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Typefaces
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Composition Helpers
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Defaults
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Grid
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Grid Helpers
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Interactive Layout Helpers
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Icon Sets
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Palette
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Components
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Forms
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Branding
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Patterns
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Interactive Patterns
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Sass
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Custom Build
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Variables
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Type Composition
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Utilities
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Interactive Patterns
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Utility Functions
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<a href="#" class="filter-dropdown-link">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-check"><path d="M11.927 22l-6.882-6.883-3 3L11.927 28 31.204 8.728l-3.001-3.001z"/></svg>
Building Layouts
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon filter-link-close"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
</div>
</div>
</label>
<span class="text-gray font-size--1 js-filter-dropdown-no-filters">None Selected</span>
</section>