diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 3338 |
1 files changed, 1668 insertions, 1670 deletions
diff --git a/docs/components.html b/docs/components.html index 3758f65..9898b83 100644 --- a/docs/components.html +++ b/docs/components.html @@ -9,397 +9,396 @@ <title>Components - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div id="content" class="docs-content off-canvas-content"> + <div id="components" class="container"> + <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3> + </div> + + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + </div> + </div> + + <div id="accordions" class="container"> + <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> + <div class="docs-note"> + <p>Accordions are used to toggle sections of content.</p> + </div> + <div class="columns"> + <div class="column col-6 col-md-12"> <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started + <input type="radio" id="accordion-1" name="accordion-radio" hidden checked> + <label class="accordion-header c-hand" for="accordion-1"> + <i class="icon icon-arrow-right mr-1"></i> + Elements </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> + <a href="#accordions">Element 1</a> </li> <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> + <a href="#accordions">Element 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements + <input type="radio" id="accordion-2" name="accordion-radio" hidden> + <label class="accordion-header c-hand" for="accordion-2"> + <i class="icon icon-arrow-right mr-1"></i> + Layout </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> + <a href="#accordions">Layout 1</a> </li> <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> + <a href="#accordions">Layout 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout + <input type="radio" id="accordion-3" name="accordion-radio" hidden> + <label class="accordion-header c-hand" for="accordion-3"> + <i class="icon icon-arrow-right mr-1"></i> + Components </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> + <a href="#accordions">Component 1</a> </li> <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> + <a href="#accordions">Component 2</a> </li> </ul> </div> </div> + </div> + <div class="column col-6 col-md-12"> <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components + <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="accordion-4"> + Elements </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> + <a href="#accordions">Element 1</a> </li> <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> + <a href="#accordions">Element 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities + <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="accordion-5"> + Layout </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> + <a href="#accordions">Layout 1</a> </li> <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> + <a href="#accordions">Layout 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals + <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="accordion-6"> + Components </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> + <a href="#accordions">Component 1</a> </li> <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> + <a href="#accordions">Component 2</a> </li> </ul> </div> </div> </div> </div> - </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </div> - </div> - - <div id="content" class="s-content"> - <div id="components" class="container"> - <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - </div> - </div> - - <div id="accordions" class="container"> - <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> - <div class="docs-note"> - <p>Accordions are used to toggle sections of content.</p> - </div> - <div class="columns"> - <div class="column col-6 col-md-12"> - <div class="accordion"> - <input type="radio" id="accordion-1" name="accordion-radio" hidden checked> - <label class="accordion-header c-hand" for="accordion-1"> - <i class="icon icon-arrow-right mr-1"></i> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Element 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Element 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="radio" id="accordion-2" name="accordion-radio" hidden> - <label class="accordion-header c-hand" for="accordion-2"> - <i class="icon icon-arrow-right mr-1"></i> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Layout 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Layout 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="radio" id="accordion-3" name="accordion-radio" hidden> - <label class="accordion-header c-hand" for="accordion-3"> - <i class="icon icon-arrow-right mr-1"></i> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Component 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Component 2</a> - </li> - </ul> - </div> - </div> - </div> - <div class="column col-6 col-md-12"> - <div class="accordion"> - <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="accordion-4"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Element 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Element 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="accordion-5"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Layout 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Layout 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="accordion-6"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Component 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Component 2</a> - </li> - </ul> - </div> - </div> - </div> - </div> <!-- accordions --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- standard Accordions example --></span> @@ -426,9 +425,9 @@ <<span class="tag">/div</span>> </code></pre> - <div class="docs-note"> - <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p> - </div> + <div class="docs-note"> + <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p> + </div> <!-- accordions --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- details and summary Accordions example --></span> @@ -443,93 +442,93 @@ <<span class="tag">/details</span>> </code></pre> - </div> + </div> - <div id="autocomplete" class="container"> - <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> - <div class="docs-note"> - <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> - </div> - <div class="columns"> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input form-input"> - <span class="chip"> - Bruce Banner - </span> - <div class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> - Thor Odinson - </div> - <div class="chip"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> - Steve Rogers - </div> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - Tony Stark - </div> - <span class="chip active"> - Natasha Romanoff - </span> - <input class="form-input" type="text" placeholder=""> + <div id="autocomplete" class="container"> + <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> + <div class="docs-note"> + <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> + </div> + <div class="columns"> + <div class="column col-9 col-xs-12"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input form-input"> + <span class="chip"> + Bruce Banner + </span> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> + Thor Odinson + </div> + <div class="chip"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> + Steve Rogers </div> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> + Tony Stark + </div> + <span class="chip active"> + Natasha Romanoff + </span> + <input class="form-input" type="text" placeholder=""> </div> </div> </div> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input form-input is-focused"> - <span class="chip"> - Bruce Banner - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - <span class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> - Thor Odinson - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - <div class="has-icon-left"> - <input class="form-input" type="text" placeholder="" value="S"> - <i class="form-icon loading"></i> - </div> + </div> + <div class="column col-9 col-xs-12"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input form-input is-focused"> + <span class="chip"> + Bruce Banner + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + <span class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> + Thor Odinson + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + <div class="has-icon-left"> + <input class="form-input" type="text" placeholder="" value="S"> + <i class="form-icon loading"></i> </div> - <ul class="menu"> - <li class="menu-item"> - <a href="#autocomplete"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> - </div> - <div class="tile-content"> - <mark>S</mark>teve Roger<mark>s</mark> - </div> + </div> + <ul class="menu"> + <li class="menu-item"> + <a href="#autocomplete"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> </div> - </a> - </li> - <li class="menu-item"> - <a href="#autocomplete"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - </div> - <div class="tile-content"> - Tony <mark>S</mark>tark - </div> + <div class="tile-content"> + <mark>S</mark>teve Roger<mark>s</mark> </div> - </a> - </li> - </ul> - </div> + </div> + </a> + </li> + <li class="menu-item"> + <a href="#autocomplete"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> + </div> + <div class="tile-content"> + Tony <mark>S</mark>tark + </div> + </div> + </a> + </li> + </ul> </div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p> - <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p> + <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> + </div> <!-- autocomplete --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> @@ -566,67 +565,67 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="avatars" class="container"> - <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> - <div class="docs-note"> - <p>Avatars are user profile pictures. </p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="img/avatar-1.png" alt="Avatar XL"> - </figure> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar LG"> - </figure> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar"> - </figure> - <figure class="avatar avatar-sm"> - <img src="img/avatar-4.png" alt="Avatar SM"> - </figure> - <figure class="avatar avatar-xs"> - <img src="img/avatar-5.png" alt="Avatar XS"> - </figure> - </div> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"></figure> - <figure class="avatar avatar-lg" data-initial="YZ"></figure> - <figure class="avatar" data-initial="YZ"></figure> - <figure class="avatar avatar-sm" data-initial="YZ"></figure> - <figure class="avatar avatar-xs" data-initial="YZ"></figure> - </div> + <div id="avatars" class="container"> + <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> + <div class="docs-note"> + <p>Avatars are user profile pictures. </p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="Avatar XL"> + </figure> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar LG"> + </figure> + <figure class="avatar"> + <img src="img/avatar-3.png" alt="Avatar"> + </figure> + <figure class="avatar avatar-sm"> + <img src="img/avatar-4.png" alt="Avatar SM"> + </figure> + <figure class="avatar avatar-xs"> + <img src="img/avatar-5.png" alt="Avatar XS"> + </figure> + </div> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl" data-initial="YZ"></figure> + <figure class="avatar avatar-lg" data-initial="YZ"></figure> + <figure class="avatar" data-initial="YZ"></figure> + <figure class="avatar avatar-sm" data-initial="YZ"></figure> + <figure class="avatar avatar-xs" data-initial="YZ"></figure> </div> - <div class="docs-note"> - <p>Add the <code>avatar</code> class to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> - <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to <div> element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="img/avatar-1.png" alt="Avatar"> - <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar"> - <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar"> - <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar avatar-sm"> - <img src="img/avatar-4.png" alt="Avatar"> - <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar avatar-xs"> - <img src="img/avatar-5.png" alt="Avatar"> - <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar"> - </figure> - </div> + </div> + <div class="docs-note"> + <p>Add the <code>avatar</code> class to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> + <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to <div> element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="Avatar"> + <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar"> + <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar"> + <img src="img/avatar-3.png" alt="Avatar"> + <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar avatar-sm"> + <img src="img/avatar-4.png" alt="Avatar"> + <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar avatar-xs"> + <img src="img/avatar-5.png" alt="Avatar"> + <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar"> + </figure> </div> + </div> <!-- avatars --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- Basic avatar examples --></span> @@ -647,28 +646,28 @@ <<span class="tag">/figure</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"> - <i class="avatar-presence online"></i> - </figure> - <figure class="avatar avatar-lg" data-initial="YZ"> - <i class="avatar-presence busy"></i> - </figure> - <figure class="avatar" data-initial="YZ"> - <i class="avatar-presence away"></i> - </figure> - <figure class="avatar avatar-sm" data-initial="YZ"> - <i class="avatar-presence offline"></i> - </figure> - <figure class="avatar avatar-xs" data-initial="YZ"> - <i class="avatar-presence online"></i> - </figure> - </div> - </div> - <div class="docs-note"> - <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl" data-initial="YZ"> + <i class="avatar-presence online"></i> + </figure> + <figure class="avatar avatar-lg" data-initial="YZ"> + <i class="avatar-presence busy"></i> + </figure> + <figure class="avatar" data-initial="YZ"> + <i class="avatar-presence away"></i> + </figure> + <figure class="avatar avatar-sm" data-initial="YZ"> + <i class="avatar-presence offline"></i> + </figure> + <figure class="avatar avatar-xs" data-initial="YZ"> + <i class="avatar-presence online"></i> + </figure> </div> + </div> + <div class="docs-note"> + <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p> + </div> <!-- avatars --> <pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> @@ -677,63 +676,63 @@ <<span class="tag">/figure</span>> </code></pre> - </div> + </div> - <div id="badges" class="container"> - <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> - <div class="docs-note"> - <p>Badges are often used as unread number indicators.</p> - </div> - <div class="columns"> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge=""> - Notifications - </span> - </div> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge="8"> - Notifications - </span> - </div> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge="88"> - Notifications - </span> - </div> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge="888"> - Notifications - </span> - </div> - </div> - <div class="docs-note"> - <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p> - <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> - </div> - <div class="columns"> - <div class="column col-sm-12"> - <button class="btn badge" data-badge="">Button</button> - <button class="btn badge" data-badge="8">Button</button> - </div> - <div class="column col-sm-12"> - <button class="btn btn-primary badge" data-badge="">Button</button> - <button class="btn btn-primary badge" data-badge="8">Button</button> - </div> - <div class="column col-sm-12"> - <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-1.png" alt="YZ"> - </figure> - <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-2.png" alt="YZ"> - </figure> - <figure class="avatar badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-3.png" alt="YZ"> - </figure> - </div> + <div id="badges" class="container"> + <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> + <div class="docs-note"> + <p>Badges are often used as unread number indicators.</p> + </div> + <div class="columns"> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge=""> + Notifications + </span> + </div> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge="8"> + Notifications + </span> + </div> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge="88"> + Notifications + </span> + </div> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge="888"> + Notifications + </span> </div> - <div class="docs-note"> - <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p> + </div> + <div class="docs-note"> + <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p> + <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> + </div> + <div class="columns"> + <div class="column col-sm-12"> + <button class="btn badge" data-badge="">Button</button> + <button class="btn badge" data-badge="8">Button</button> + </div> + <div class="column col-sm-12"> + <button class="btn btn-primary badge" data-badge="">Button</button> + <button class="btn btn-primary badge" data-badge="8">Button</button> + </div> + <div class="column col-sm-12"> + <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-1.png" alt="YZ"> + </figure> + <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-2.png" alt="YZ"> + </figure> + <figure class="avatar badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-3.png" alt="YZ"> + </figure> </div> + </div> + <div class="docs-note"> + <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p> + </div> <!-- badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span>> @@ -753,41 +752,41 @@ <<span class="tag">/figure</span>> </code></pre> - </div> + </div> - <div id="bars" class="container"> - <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> - <div class="docs-note"> - <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> - </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-sm"> - <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> - </div> + <div id="bars" class="container"> + <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> + <div class="docs-note"> + <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar bar-sm"> + <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar"> - <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div> - </div> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div> </div> </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar"> - <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> - <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> - </div> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> + <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> + <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> + <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p> - <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p> + <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p> + </div> <!-- bars --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-sm"</span>> @@ -801,33 +800,33 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="bars-slider" class="s-subtitle">Slider bars</h4> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-slider"> - <div class="bar-item" role="progressbar" style="width:50%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button> - </div> + <h4 id="bars-slider" class="s-subtitle">Slider bars</h4> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar bar-slider"> + <div class="bar-item" role="progressbar" style="width:50%;"> + <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button> </div> </div> </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-slider"> - <div class="bar-item" role="progressbar" style="width:15%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button> - </div> - <div class="bar-item" role="progressbar" style="width:65%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button> - </div> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar bar-slider"> + <div class="bar-item" role="progressbar" style="width:15%;"> + <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button> + </div> + <div class="bar-item" role="progressbar" style="width:65%;"> + <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button> </div> </div> </div> + </div> - <div class="docs-note"> - <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p> - <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p> - </div> + <div class="docs-note"> + <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p> + <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p> + </div> <!-- slider bars --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- slider --></span> @@ -848,71 +847,71 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="breadcrumbs" class="container"> - <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> - <div class="docs-note"> - <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> - Settings - </a> - </li> - </ul> - </div> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> - Settings - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar"> - Change avatar - </a> - </li> - </ul> - </div> + <div id="breadcrumbs" class="container"> + <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> + <div class="docs-note"> + <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> + </div> + <div class="columns"> <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> - Settings - </a> - </li> - <li class="breadcrumb-item"> - Search result: - <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre"> - Spectre - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + </ul> + </div> + <div class="column col-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar"> + Change avatar + </a> + </li> + </ul> + </div> + <div class="column col-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + <li class="breadcrumb-item"> + Search result: + <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre"> + Spectre + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> + </div> <!-- breadcrumbs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> @@ -928,117 +927,117 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="cards" class="container"> - <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> - <div class="docs-note"> - <p>Cards are flexible content containers.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"> - </div> - <div class="card-header"> - <div class="card-title h5">Microsoft</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body"> - Empower every person and every organization on the planet to achieve more. - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Do</a> - </div> + <div id="cards" class="container"> + <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> + <div class="docs-note"> + <p>Cards are flexible content containers.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"> </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Hardware and software</div> - </div> - <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - </div> - </div> + <div class="card-header"> + <div class="card-title h5">Microsoft</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + Empower every person and every organization on the planet to achieve more. + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Do</a> </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"> - </div> - <div class="card-header"> - <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> - <div class="card-title h5">Google I/O</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body"> - An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle text-gray">Hardware and software</div> + </div> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary">Buy</button> + <button class="btn">Buy</button> + <button class="btn">Buy</button> </div> </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"> - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Buy</a> - <a href="#cards" class="btn btn-link">Share</a> - </div> - <div class="card-body"> - <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. - </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"> + </div> + <div class="card-header"> + <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> + <div class="card-title h5">Google I/O</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Hardware and software</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"> - </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Buy</a> + <a href="#cards" class="btn btn-link">Share</a> + </div> + <div class="card-body"> + <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Google</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body"> - Organize the world’s information and make it universally accessible and useful. - </div> - <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"> - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Search</a> - <a href="#cards" class="btn btn-link">Share</a> - </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle text-gray">Hardware and software</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-image"> + <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"> </div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Google</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + Organize the world’s information and make it universally accessible and useful. + </div> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Search</a> + <a href="#cards" class="btn btn-link">Share</a> + </div> + </div> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p> + </div> <!-- cards --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> @@ -1058,48 +1057,48 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="chips" class="container"> - <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> - <div class="docs-note"> - <p>Chips are complex entities in small blocks. </p> - </div> - <div class="columns"> - <div class="column col-12"> - <span class="chip"> - Crime - </span> - <span class="chip"> - Drama - </span> - <span class="chip"> - Biography - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - <span class="chip"> - Mystery - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - </div> - <div class="column col-12"> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - Tony Stark - </div> - <div class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> - Thor Odinson - </div> - <div class="chip"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> - Steve Rogers - </div> + <div id="chips" class="container"> + <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> + <div class="docs-note"> + <p>Chips are complex entities in small blocks. </p> + </div> + <div class="columns"> + <div class="column col-12"> + <span class="chip"> + Crime + </span> + <span class="chip"> + Drama + </span> + <span class="chip"> + Biography + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + <span class="chip"> + Mystery + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + </div> + <div class="column col-12"> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> + Tony Stark + </div> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> + Thor Odinson + </div> + <div class="chip"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> + Steve Rogers </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p> + </div> <!-- chips --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>>Crime<<span class="tag">/span</span>> @@ -1116,59 +1115,59 @@ <<span class="tag">/div</span>></code> </pre> - </div> + </div> - <div id="empty" class="container"> - <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3> - <div class="docs-note"> - <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-3x icon-mail"></i> - </div> - <p class="empty-title h5">You have no new messages</p> - <p class="empty-subtitle">Click the button to start a conversation</p> - <div class="empty-action"> - <button class="btn btn-primary">Send a message</button> - </div> + <div id="empty" class="container"> + <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3> + <div class="docs-note"> + <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-3x icon-mail"></i> + </div> + <p class="empty-title h5">You have no new messages</p> + <p class="empty-subtitle">Click the button to start a conversation</p> + <div class="empty-action"> + <button class="btn btn-primary">Send a message</button> </div> </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-3x icon-mail"></i> - </div> - <p class="empty-title h5">You've successfully signed up</p> - <p class="empty-subtitle">Click the button to invite your friends</p> - <div class="empty-action"> - <button class="btn btn-primary">Invite your friends</button> - </div> - <div class="empty-action"> - <button class="btn btn-link">Skip</button> - </div> + </div> + <div class="column col-12"> + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-3x icon-mail"></i> + </div> + <p class="empty-title h5">You've successfully signed up</p> + <p class="empty-subtitle">Click the button to invite your friends</p> + <div class="empty-action"> + <button class="btn btn-primary">Invite your friends</button> + </div> + <div class="empty-action"> + <button class="btn btn-link">Skip</button> </div> </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-3x icon-people"></i> - </div> - <p class="empty-title h5">You are not following anyone</p> - <p class="empty-subtitle">Start to meet new friends</p> - <div class="empty-action input-group input-inline"> - <input type="text" class="form-input" placeholder=""> - <button class="btn btn-primary input-group-btn">Search</button> - </div> + </div> + <div class="column col-12"> + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-3x icon-people"></i> + </div> + <p class="empty-title h5">You are not following anyone</p> + <p class="empty-subtitle">Start to meet new friends</p> + <div class="empty-action input-group input-inline"> + <input type="text" class="form-input" placeholder=""> + <button class="btn btn-primary input-group-btn">Search</button> </div> </div> </div> + </div> - <div class="docs-note"> - <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> - </div> + <div class="docs-note"> + <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> + </div> <!-- empty states --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> @@ -1183,78 +1182,78 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="menus" class="container"> - <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> - <div class="docs-note"> - <p>Menus are vertical list of links or buttons for actions and navigation.</p> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar" alt="Avatar"> - </div> - <div class="tile-content"> - Steve Rogers - </div> + <div id="menus" class="container"> + <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> + <div class="docs-note"> + <p>Menus are vertical list of links or buttons for actions and navigation.</p> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="menu-item"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar" alt="Avatar"> </div> - </li> - <li class="divider"></li> - <li class="menu-item"> - <div class="menu-badge"> - <label class="label label-primary">2</label> + <div class="tile-content"> + Steve Rogers </div> - <a href="#menus" class="active"> - My profile - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Settings - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Logout - </a> - </li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="divider" data-content="LINKS"></li> - <li class="menu-item"> - <a href="#menus">Slack</a> - </li> - <li class="menu-item"> - <a href="#menus">Hipchat</a> - </li> - <li class="menu-item"> - <a href="#menus">Skype</a> - </li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <a href="#menus">Slack</a> - </li> - <li class="menu-item"> - <a href="#menus">Hipchat</a> - </li> - <li class="menu-item"> - <a href="#menus">Skype</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + </div> + </li> + <li class="divider"></li> + <li class="menu-item"> + <div class="menu-badge"> + <label class="label label-primary">2</label> + </div> + <a href="#menus" class="active"> + My profile + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + Settings + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + Logout + </a> + </li> + </ul> + </div> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="divider" data-content="LINKS"></li> + <li class="menu-item"> + <a href="#menus">Slack</a> + </li> + <li class="menu-item"> + <a href="#menus">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#menus">Skype</a> + </li> + </ul> + </div> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="menu-item"> + <a href="#menus">Slack</a> + </li> + <li class="menu-item"> + <a href="#menus">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#menus">Skype</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + </div> <!-- menus --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> @@ -1281,39 +1280,16 @@ <<span class="tag">/ul</span>> </code></pre> - <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4> - <div class="docs-note"> - <p>The dropdown is a combination of buttons and menus.</p> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="dropdown"> - <div class="btn-group"> - <a class="btn btn-primary">dropdown button</a> - <a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - </div> - <div class="column col-xs-12"> - <div class="dropdown"> - <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4> + <div class="docs-note"> + <p>The dropdown is a combination of buttons and menus.</p> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="dropdown"> + <div class="btn-group"> + <a class="btn btn-primary">dropdown button</a> + <a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a> <ul class="menu"> <li class="menu-item"> <a href="#dropdowns"> @@ -1334,32 +1310,55 @@ </div> </div> </div> - <div class="docs-note"> - <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p> - <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> - </div> - <div class="columns"> - <div class="column col-xs-12 text-right"> - <div class="dropdown dropdown-right"> - <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> - <ul class="menu text-left"> - <li class="menu-item"> - <a href="#dropdowns">Slack</a> - </li> - <li class="menu-item"> - <a href="#dropdowns">Hipchat</a> - </li> - <li class="menu-item"> - <a href="#dropdowns">Skype</a> - </li> - </ul> - </div> + <div class="column col-xs-12"> + <div class="dropdown"> + <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <ul class="menu"> + <li class="menu-item"> + <a href="#dropdowns"> + Slack + </a> + </li> + <li class="menu-item"> + <a href="#dropdowns"> + Hipchat + </a> + </li> + <li class="menu-item"> + <a href="#dropdowns"> + Skype + </a> + </li> + </ul> </div> </div> - <div class="docs-note"> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> + </div> + <div class="docs-note"> + <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> + <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p> + <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> + </div> + <div class="columns"> + <div class="column col-xs-12 text-right"> + <div class="dropdown dropdown-right"> + <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <ul class="menu text-left"> + <li class="menu-item"> + <a href="#dropdowns">Slack</a> + </li> + <li class="menu-item"> + <a href="#dropdowns">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#dropdowns">Skype</a> + </li> + </ul> + </div> </div> + </div> + <div class="docs-note"> + <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> + </div> <!-- dropdowns --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- basic dropdown button --></span> @@ -1391,49 +1390,49 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="modals" class="container"> - <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> - <div class="docs-note"> - <p>Modals are flexible dialog prompts.</p> - </div> - <div class="columns"> - <div class="column"> - <a href="#example-modal-1" class="btn btn-primary">Open Modal</a> - <div class="modal" id="example-modal-1"> - <a href="#modals" class="modal-overlay" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"> - <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p>This is the content inside the modal.</p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button> - <a href="#modals" class="btn btn-link">Close</a> + <div id="modals" class="container"> + <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> + <div class="docs-note"> + <p>Modals are flexible dialog prompts.</p> + </div> + <div class="columns"> + <div class="column"> + <a href="#example-modal-1" class="btn btn-primary">Open Modal</a> + <div class="modal" id="example-modal-1"> + <a href="#modals" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> </div> </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button> + <a href="#modals" class="btn btn-link">Close</a> + </div> </div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> - <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> + <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p> + </div> <!-- modals example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> @@ -1455,84 +1454,84 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a> - <div class="modal modal-sm" id="example-modal-2"> - <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"> - <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-7">Name</label> - <input class="form-input" type="text" id="input-example-7" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Female - </label> - </div> - </form> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Submit</button> - <button class="btn btn-link">Close</button> + <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a> + <div class="modal modal-sm" id="example-modal-2"> + <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-7">Name</label> + <input class="form-input" type="text" id="input-example-7" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender"> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked> + <i class="form-icon"></i> Female + </label> + </div> + </form> </div> </div> + <div class="modal-footer"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Close</button> + </div> </div> </div> </div> - <div class="docs-note"> - <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p> - </div> - <div class="columns"> - <div class="column"> - <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a> - <div class="modal modal-lg" id="example-modal-3"> - <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"> - <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p>This is the content inside the modal.</p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button> - <a href="#modals-sizes" class="btn btn-link">Close</a> + </div> + <div class="docs-note"> + <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p> + </div> + <div class="columns"> + <div class="column"> + <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a> + <div class="modal modal-lg" id="example-modal-3"> + <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> </div> </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button> + <a href="#modals-sizes" class="btn btn-link">Close</a> + </div> </div> </div> </div> - <div class="docs-note"> - <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p> - </div> + </div> + <div class="docs-note"> + <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p> + </div> <!-- modals --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> @@ -1543,45 +1542,45 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="navs" class="container"> - <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item active"> - <a href="#nav">Layout</a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">Responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">Navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">Empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + <div id="navs" class="container"> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Elements</a> + </li> + <li class="nav-item active"> + <a href="#nav">Layout</a> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#nav">Responsive</a> + </li> + <li class="nav-item"> + <a href="#nav">Navbar</a> + </li> + <li class="nav-item"> + <a href="#nav">Empty states</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#nav">Components</a> + </li> + <li class="nav-item"> + <a href="#nav">Utilities</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + </div> <!-- navs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> @@ -1614,71 +1613,71 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="pagination" class="container"> - <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"> - <a href="#pagination">Prev</a> - </li> - <li class="page-item"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">4</a> - </li> - <li class="page-item active"> - <a href="#pagination">5</a> - </li> - <li class="page-item"> - <a href="#pagination">6</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">9</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item disabled"> - <a href="#pagination" tabindex="-1">Prev</a> - </li> - <li class="page-item active"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <a href="#pagination">2</a> - </li> - <li class="page-item"> - <a href="#pagination">3</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">9</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p> + <div id="pagination" class="container"> + <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> + <div class="columns"> + <div class="column col-xs-12"> + <ul class="pagination"> + <li class="page-item"> + <a href="#pagination">Prev</a> + </li> + <li class="page-item"> + <a href="#pagination">1</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#pagination">4</a> + </li> + <li class="page-item active"> + <a href="#pagination">5</a> + </li> + <li class="page-item"> + <a href="#pagination">6</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#pagination">9</a> + </li> + <li class="page-item"> + <a href="#pagination">Next</a> + </li> + </ul> + </div> + <div class="column col-xs-12"> + <ul class="pagination"> + <li class="page-item disabled"> + <a href="#pagination" tabindex="-1">Prev</a> + </li> + <li class="page-item active"> + <a href="#pagination">1</a> + </li> + <li class="page-item"> + <a href="#pagination">2</a> + </li> + <li class="page-item"> + <a href="#pagination">3</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#pagination">9</a> + </li> + <li class="page-item"> + <a href="#pagination">Next</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p> + </div> <!-- pagination --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> @@ -1706,27 +1705,27 @@ <<span class="tag">/ul</span>> </code></pre> - <div class="columns"> - <div class="column col-12"> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="#pagination"> - <div class="page-item-subtitle">Previous</div> - <div class="page-item-title h5">Getting started</div> - </a> - </li> - <li class="page-item page-next"> - <a href="#pagination"> - <div class="page-item-subtitle">Next</div> - <div class="page-item-title h5">Layout</div> - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>You could use previous and next pagination to navigate. </p> + <div class="columns"> + <div class="column col-12"> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="#pagination"> + <div class="page-item-subtitle">Previous</div> + <div class="page-item-title h5">Getting started</div> + </a> + </li> + <li class="page-item page-next"> + <a href="#pagination"> + <div class="page-item-subtitle">Next</div> + <div class="page-item-title h5">Layout</div> + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>You could use previous and next pagination to navigate. </p> + </div> <!-- pagination --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> @@ -1745,149 +1744,149 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="panels" class="container"> - <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> - <div class="docs-note"> - <p>Panels are flexible view container with auto-expand content section.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header text-center"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar"> - </figure> - <div class="panel-title h5 mt-10">Bruce Banner</div> - <div class="panel-subtitle">THE HULK</div> - </div> - <nav class="panel-nav"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#panels"> - Profile - </a> - </li> - <li class="tab-item"> - <a href="#panels"> - Files - </a> - </li> - <li class="tab-item"> - <a href="#panels"> - Tasks - </a> - </li> - </ul> - </nav> - <div class="panel-body"> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">E-mail</div> - <div class="tile-subtitle">bruce.banner@hulk.com</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> + <div id="panels" class="container"> + <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> + <div class="docs-note"> + <p>Panels are flexible view container with auto-expand content section.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header text-center"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar"> + </figure> + <div class="panel-title h5 mt-10">Bruce Banner</div> + <div class="panel-subtitle">THE HULK</div> + </div> + <nav class="panel-nav"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#panels"> + Profile + </a> + </li> + <li class="tab-item"> + <a href="#panels"> + Files + </a> + </li> + <li class="tab-item"> + <a href="#panels"> + Tasks + </a> + </li> + </ul> + </nav> + <div class="panel-body"> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">E-mail</div> + <div class="tile-subtitle">bruce.banner@hulk.com</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Skype</div> - <div class="tile-subtitle">bruce.banner</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> + </div> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Skype</div> + <div class="tile-subtitle">bruce.banner</div> </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Location</div> - <div class="tile-subtitle">Dayton, Ohio</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> </div> </div> - <div class="panel-footer"> - <button class="btn btn-primary btn-block">Save</button> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Location</div> + <div class="tile-subtitle">Dayton, Ohio</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> + </div> </div> </div> + <div class="panel-footer"> + <button class="btn btn-primary btn-block">Save</button> + </div> </div> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header"> - <div class="panel-title h6">Comments</div> + </div> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header"> + <div class="panel-title h6">Comments</div> + </div> + <div class="panel-body"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-1.png" alt="Avatar"> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">Thor Odinson</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> </div> - <div class="panel-body"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-1.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Thor Odinson</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-2.png" alt="Avatar"> + </figure> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-2.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Bruce Banner</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> + <div class="tile-content"> + <p class="tile-title">Bruce Banner</p> + <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar" data-initial="TS"></figure> - </div> - <div class="tile-content"> - <p class="tile-title">Tony Stark</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar" data-initial="TS"></figure> + </div> + <div class="tile-content"> + <p class="tile-title">Tony Stark</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-4.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Steve Rogers</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-4.png" alt="Avatar"> + </figure> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Natasha Romanoff</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> + <div class="tile-content"> + <p class="tile-title">Steve Rogers</p> + <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> </div> </div> - <div class="panel-footer"> - <div class="input-group"> - <input type="text" class="form-input" placeholder="Hello"> - <button class="btn btn-primary input-group-btn">Send</button> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-3.png" alt="Avatar"> + </figure> </div> + <div class="tile-content"> + <p class="tile-title">Natasha Romanoff</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + </div> + </div> + <div class="panel-footer"> + <div class="input-group"> + <input type="text" class="form-input" placeholder="Hello"> + <button class="btn btn-primary input-group-btn">Send</button> </div> </div> </div> </div> + </div> - <div class="docs-note"> - <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> - </div> + <div class="docs-note"> + <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> + </div> <!-- panels --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> @@ -1906,103 +1905,103 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="popovers" class="container"> - <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> - <div class="docs-note"> - <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> - </div> - <div class="columns"> - <div class="column col-3 col-sm-6"> - <div class="popover"> - <a href="#popovers" class="btn btn-primary"> - top popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + <div id="popovers" class="container"> + <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> + <div class="docs-note"> + <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> + </div> + <div class="columns"> + <div class="column col-3 col-sm-6"> + <div class="popover"> + <a href="#popovers" class="btn btn-primary"> + top popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-right"> - <a href="#popovers" class="btn btn-primary"> - right popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + </div> + <div class="column col-3 col-sm-6"> + <div class="popover popover-right"> + <a href="#popovers" class="btn btn-primary"> + right popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-bottom"> - <a href="#popovers" class="btn btn-primary"> - bottom popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + </div> + <div class="column col-3 col-sm-6"> + <div class="popover popover-bottom"> + <a href="#popovers" class="btn btn-primary"> + bottom popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-left"> - <a href="#popovers" class="btn btn-primary"> - left popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + </div> + <div class="column col-3 col-sm-6"> + <div class="popover popover-left"> + <a href="#popovers" class="btn btn-primary"> + left popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> </div> - <div class="docs-note"> - <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p> - <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p> - </div> + </div> + <div class="docs-note"> + <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p> + <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p> + </div> <!-- popovers --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover popover-right"</span>> @@ -2023,50 +2022,50 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="steps" class="container"> - <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> - <div class="docs-note"> - <p>Steps are progress indicators of a sequence of task steps.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <ul class="step"> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a> - </li> - <li class="step-item active"> - <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a> - </li> - </ul> - </div> - <div class="column col-12"> - <ul class="step"> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a> - </li> - <li class="step-item active"> - <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p> + <div id="steps" class="container"> + <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> + <div class="docs-note"> + <p>Steps are progress indicators of a sequence of task steps.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <ul class="step"> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a> + </li> + <li class="step-item active"> + <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a> + </li> + </ul> + </div> + <div class="column col-12"> + <ul class="step"> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a> + </li> + <li class="step-item active"> + <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p> + </div> <!-- steps --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"step"</span>> @@ -2085,61 +2084,61 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="tabs" class="container"> - <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> - <div class="docs-note"> - <p>Tabs enable quick switch between different views.</p> - </div> - <div class="columns"> - <div class="column col-6 col-sm-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Store - </a> - </li> - </ul> - </div> - <div class="column col-6 col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> + <div id="tabs" class="container"> + <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> + <div class="docs-note"> + <p>Tabs enable quick switch between different views.</p> + </div> + <div class="columns"> + <div class="column col-6 col-sm-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + </ul> + </div> + <div class="column col-6 col-sm-12"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> + </div> <!-- tabs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> @@ -2158,49 +2157,49 @@ <<span class="tag">/ul</span>> </code></pre> - <div class="columns"> - <div class="column col-sm-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="999"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - <div class="column col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> + <div class="columns"> + <div class="column col-sm-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs" class="badge" data-badge="999"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> + </div> + <div class="column col-sm-12"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#tabs" class="badge" data-badge="9"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs" class="badge" data-badge="99"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> + </div> <!-- tabs with badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> @@ -2212,42 +2211,42 @@ <<span class="tag">/ul</span>> </code></pre> - <div class="columns"> - <div class="column col-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - <span class="btn btn-clear"></span> - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Store - </a> - </li> - <li class="tab-item tab-action"> - <div class="input-group input-inline"> - <input class="form-input input-sm" type="text" placeholder="search"> - <button class="btn btn-primary btn-sm input-group-btn">Search</button> - </div> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> + <div class="columns"> + <div class="column col-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + <span class="btn btn-clear"></span> + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + <li class="tab-item tab-action"> + <div class="input-group input-inline"> + <input class="form-input input-sm" type="text" placeholder="search"> + <button class="btn btn-primary btn-sm input-group-btn">Search</button> + </div> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> + </div> <!-- tabs with badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> @@ -2265,53 +2264,53 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="tiles" class="container"> - <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> - <div class="docs-note"> - <p>Tiles are repeatable or embeddable information blocks.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-3.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">The Avengers</p> - <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - <div class="tile-action"> - <button class="btn btn-primary">Join</button> - <button class="btn">Contact</button> - </div> + <div id="tiles" class="container"> + <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> + <div class="docs-note"> + <p>Tiles are repeatable or embeddable information blocks.</p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-3.png" alt="Avatar"> + </figure> </div> - </div> - <div class="column col-9 col-sm-12"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">The S.H.I.E.L.D.</p> - <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - <p> - <button class="btn btn-primary btn-sm">Join</button> - <button class="btn btn-sm">Contact</button> - </p> - </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + <div class="tile-action"> + <button class="btn btn-primary">Join</button> + <button class="btn">Contact</button> </div> </div> </div> - <div class="docs-note"> - <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> - <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p> + <div class="column col-9 col-sm-12"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar"> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The S.H.I.E.L.D.</p> + <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + <p> + <button class="btn btn-primary btn-sm">Join</button> + <button class="btn btn-sm">Contact</button> + </p> + </div> + </div> </div> + </div> + <div class="docs-note"> + <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> + <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p> + </div> <!-- tiles --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> @@ -2330,29 +2329,29 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4> - <div class="docs-note"> - <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> - <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> - </div> - <div class="columns"> - <div class="column col-6 col-md-9 col-xs-12"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <div class="example-tile-icon"> - <i class="icon icon-mail centered"></i> - </div> - </div> - <div class="tile-content"> - <div class="tile-title">spectre-docs.pdf</div> - <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> + <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4> + <div class="docs-note"> + <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> + <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> + </div> + <div class="columns"> + <div class="column col-6 col-md-9 col-xs-12"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-mail centered"></i> </div> </div> + <div class="tile-content"> + <div class="tile-title">spectre-docs.pdf</div> + <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> + </div> </div> </div> + </div> <!-- tiles --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> @@ -2373,54 +2372,54 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="toasts" class="container"> - <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> - <div class="docs-note"> - <p>Toasts are used to show alert or information to users.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <div class="toast"> - <button class="btn btn-clear float-right"></button> - <h6>Toast Title</h6> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-9 col-sm-12"> - <div class="toast toast-primary"> - <button class="btn btn-clear float-right"></button> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> + <div id="toasts" class="container"> + <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> + <div class="docs-note"> + <p>Toasts are used to show alert or information to users.</p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <div class="toast"> + <button class="btn btn-clear float-right"></button> + <h6>Toast Title</h6> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p> - </div> - <div class="columns"> - <div class="column col-sm-12"> - <div class="toast toast-success"> - <button class="btn btn-clear float-right"></button> - Toast success - </div> + <div class="column col-9 col-sm-12"> + <div class="toast toast-primary"> + <button class="btn btn-clear float-right"></button> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> - <div class="column col-sm-12"> - <div class="toast toast-warning"> - <button class="btn btn-clear float-right"></button> - Toast warning - </div> + </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p> + </div> + <div class="columns"> + <div class="column col-sm-12"> + <div class="toast toast-success"> + <button class="btn btn-clear float-right"></button> + Toast success </div> - <div class="column col-sm-12"> - <div class="toast toast-error"> - <button class="btn btn-clear float-right"></button> - Toast error - </div> + </div> + <div class="column col-sm-12"> + <div class="toast toast-warning"> + <button class="btn btn-clear float-right"></button> + Toast warning </div> </div> - <div class="docs-note"> - <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p> + <div class="column col-sm-12"> + <div class="toast toast-error"> + <button class="btn btn-clear float-right"></button> + Toast error + </div> </div> + </div> + <div class="docs-note"> + <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p> + </div> <!-- toasts --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> @@ -2433,45 +2432,44 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="tooltips" class="container"> - <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> - <div class="docs-note"> - <p>Tooltips provide context information labels that appear on hover and focus.</p> + <div id="tooltips" class="container"> + <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> + <div class="docs-note"> + <p>Tooltips provide context information labels that appear on hover and focus.</p> + </div> + <div class="columns text-center"> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> </div> - <div class="columns text-center"> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button> - </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button> </div> - <div class="docs-note"> - <p>Tooltips component is built entirely in CSS.</p> - <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button> </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button> + </div> + </div> + <div class="docs-note"> + <p>Tooltips component is built entirely in CSS.</p> + <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p> + </div> <!-- tooltips --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> |