avvo-styleguide

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>Avvo Styleguide</title> <meta name="description" content=""> <meta name="generator" content="kss-node"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="kss-assets/kss.css"> <link rel="stylesheet" href="../dist/styleguide.css"> </head> <body id="kss-node" > <div class="kss-sidebar kss-style"> <header class="kss-header"> <h1 class="kss-doc-title">Avvo Styleguide</h1> </header> <nav class="kss-nav"> <ul class="kss-nav__menu"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="./"> <span class="kss-nav__ref">0</span ><span class="kss-nav__name">Overview</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html"> <span class="kss-nav__ref">1</span><span class="kss-nav__name">Components</span> </a> <ul class="kss-nav__menu-child"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-button"> <span class="kss-nav__ref ">1.1</span ><span class="kss-nav__name">Buttons</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-button-colors"> <span class="kss-nav__ref kss-nav__ref-child">1.1.1</span ><span class="kss-nav__name">Button colors</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-button-sizes"> <span class="kss-nav__ref kss-nav__ref-child">1.1.2</span ><span class="kss-nav__name">Button sizes</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-cards"> <span class="kss-nav__ref ">1.2</span ><span class="kss-nav__name">Cards</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-cards-cells"> <span class="kss-nav__ref kss-nav__ref-child">1.2.1</span ><span class="kss-nav__name">Card Cells</span> </a> </li> </ul> </li> </ul> </nav> </div> <article role="main" class="kss-main"> <div id="kssref-components" class="kss-section kss-section--depth-1 "> <div class="kss-style"> <h1 class="kss-title kss-title--level-1"> <a class="kss-title__permalink" href="#kssref-components"> <span class="kss-title__ref"> 1 <span class="kss-title__permalink-hash"> #Components </span> </span> Components </a> </h1> </div> </div> <section id="kssref-components-button" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-components-button"> <span class="kss-title__ref"> 1.1 <span class="kss-title__permalink-hash"> #Components.button </span> </span> Buttons </a> </h2> <div class="kss-description"> <p>Use any of the available button classes to quickly create a styled button.</p> </div> </div> <div class="kss-source kss-style"> Source: <code>components/_button.scss</code>, line 1 </div> </section> <section id="kssref-components-button-colors" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-components-button-colors"> <span class="kss-title__ref"> 1.1.1 <span class="kss-title__permalink-hash"> #Components.button.colors </span> </span> Button colors </a> </h3> <p class="kss-toolbar"> <a href="#kssref-components-button-colors" data-kss-fullscreen="kssref-components-button-colors"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-components-button-colors.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-components-button-colors" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-components-button-colors" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Examples </div> <div class="kss-modifier__default-name kss-style"> Default styling </div> <div class="kss-modifier__example"> <button class="btn ">Button Element</button> <input class="btn " type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-primary </div> <div class="kss-modifier__description kss-style"> Primary / Default </div> <div class="kss-modifier__example"> <button class="btn btn-primary">Button Element</button> <input class="btn btn-primary" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-secondary </div> <div class="kss-modifier__description kss-style"> Secondary </div> <div class="kss-modifier__example"> <button class="btn btn-secondary">Button Element</button> <input class="btn btn-secondary" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-tertiary </div> <div class="kss-modifier__description kss-style"> Tertiary </div> <div class="kss-modifier__example"> <button class="btn btn-tertiary">Button Element</button> <input class="btn btn-tertiary" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-primary.active </div> <div class="kss-modifier__description kss-style"> Primary active state </div> <div class="kss-modifier__example"> <button class="btn btn-primary active">Button Element</button> <input class="btn btn-primary active" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-secondary.active </div> <div class="kss-modifier__description kss-style"> Secondary active state </div> <div class="kss-modifier__example"> <button class="btn btn-secondary active">Button Element</button> <input class="btn btn-secondary active" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-tertiary.active </div> <div class="kss-modifier__description kss-style"> Tertiary active state </div> <div class="kss-modifier__example"> <button class="btn btn-tertiary active">Button Element</button> <input class="btn btn-tertiary active" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-primary.disabled </div> <div class="kss-modifier__description kss-style"> Primary disabled state </div> <div class="kss-modifier__example"> <button class="btn btn-primary disabled">Button Element</button> <input class="btn btn-primary disabled" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-secondary.disabled </div> <div class="kss-modifier__description kss-style"> Secondary disabled state </div> <div class="kss-modifier__example"> <button class="btn btn-secondary disabled">Button Element</button> <input class="btn btn-secondary disabled" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-tertiary.disabled </div> <div class="kss-modifier__description kss-style"> Tertiary disabled state </div> <div class="kss-modifier__example"> <button class="btn btn-tertiary disabled">Button Element</button> <input class="btn btn-tertiary disabled" type="button" value="Input Button" /> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><button class="btn [modifier class]">Button Element</button> <input class="btn [modifier class]" type="button" value="Input Button" /></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_button.scss</code>, line 145 </div> </section> <section id="kssref-components-button-sizes" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-components-button-sizes"> <span class="kss-title__ref"> 1.1.2 <span class="kss-title__permalink-hash"> #Components.button.sizes </span> </span> Button sizes </a> </h3> <p class="kss-toolbar"> <a href="#kssref-components-button-sizes" data-kss-fullscreen="kssref-components-button-sizes"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-components-button-sizes.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-components-button-sizes" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-components-button-sizes" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Examples </div> <div class="kss-modifier__default-name kss-style"> Default styling </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12 col-md-6"> <button class="btn btn-primary ">Button Element</button> <input class="btn btn-secondary " type="button" value="Input Button" /> <input class="btn btn-tertiary " type="button" value="Tertiary" /> </div> </div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-lg </div> <div class="kss-modifier__description kss-style"> Large sized button </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12 col-md-6"> <button class="btn btn-primary btn-lg">Button Element</button> <input class="btn btn-secondary btn-lg" type="button" value="Input Button" /> <input class="btn btn-tertiary btn-lg" type="button" value="Tertiary" /> </div> </div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-sm </div> <div class="kss-modifier__description kss-style"> Small sized button </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12 col-md-6"> <button class="btn btn-primary btn-sm">Button Element</button> <input class="btn btn-secondary btn-sm" type="button" value="Input Button" /> <input class="btn btn-tertiary btn-sm" type="button" value="Tertiary" /> </div> </div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-xs </div> <div class="kss-modifier__description kss-style"> Extra-small sized button </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12 col-md-6"> <button class="btn btn-primary btn-xs">Button Element</button> <input class="btn btn-secondary btn-xs" type="button" value="Input Button" /> <input class="btn btn-tertiary btn-xs" type="button" value="Tertiary" /> </div> </div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .btn-block </div> <div class="kss-modifier__description kss-style"> Block sized button </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12 col-md-6"> <button class="btn btn-primary btn-block">Button Element</button> <input class="btn btn-secondary btn-block" type="button" value="Input Button" /> <input class="btn btn-tertiary btn-block" type="button" value="Tertiary" /> </div> </div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="row"> <div class="col-xs-12 col-md-6"> <button class="btn btn-primary [modifier class]">Button Element</button> <input class="btn btn-secondary [modifier class]" type="button" value="Input Button" /> <input class="btn btn-tertiary [modifier class]" type="button" value="Tertiary" /> </div> </div></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_button.scss</code>, line 65 </div> </section> <section id="kssref-components-cards" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-components-cards"> <span class="kss-title__ref"> 1.2 <span class="kss-title__permalink-hash"> #Components.cards </span> </span> Cards </a> </h2> <p class="kss-toolbar"> <a href="#kssref-components-cards" data-kss-fullscreen="kssref-components-cards"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-components-cards.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-components-cards" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-components-cards" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Basic border, background, and padding for content.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Examples </div> <div class="kss-modifier__default-name kss-style"> Default styling </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12"> <div class="card "> <p>Basic card example</p> <a>Card link</a> </div> </div> </div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .accent-border-top.accent-border-coral </div> <div class="kss-modifier__description kss-style"> Card with accent borders </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12"> <div class="card accent-border-top accent-border-coral"> <p>Basic card example</p> <a>Card link</a> </div> </div> </div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .u-bg-navy.u-bg-dark </div> <div class="kss-modifier__description kss-style"> Card with background colors </div> <div class="kss-modifier__example"> <div class="row"> <div class="col-xs-12"> <div class="card u-bg-navy u-bg-dark"> <p>Basic card example</p> <a>Card link</a> </div> </div> </div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="row"> <div class="col-xs-12"> <div class="card [modifier class]"> <p>Basic card example</p> <a>Card link</a> </div> </div> </div></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_card.scss</code>, line 1 </div> </section> <section id="kssref-components-cards-cells" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-components-cards-cells"> <span class="kss-title__ref"> 1.2.1 <span class="kss-title__permalink-hash"> #Components.cards.cells </span> </span> Card Cells </a> </h3> <p class="kss-toolbar"> <a href="#kssref-components-cards-cells" data-kss-fullscreen="kssref-components-cards-cells"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-components-cards-cells.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-components-cards-cells" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-components-cards-cells" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Cards can be divided into cells for more complex layouts.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <div class="card-cells"> <div class="row"> <div class="card col-xs-12 col-md-5"> <p>Card Cell 1</p> </div> <div class="card col-xs-12 col-md-7"> <p>Card cell 2</p> </div> </div> <div class="row"> <div class="card col-xs-12 col-md-2"> <p>Card Cell 3</p> </div> <div class="card col-xs-12 col-md-10"> <p>Card cell 4</p> </div> </div> </div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="card-cells"> <div class="row"> <div class="card col-xs-12 col-md-5"> <p>Card Cell 1</p> </div> <div class="card col-xs-12 col-md-7"> <p>Card cell 2</p> </div> </div> <div class="row"> <div class="card col-xs-12 col-md-2"> <p>Card Cell 3</p> </div> <div class="card col-xs-12 col-md-10"> <p>Card cell 4</p> </div> </div> </div></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_card.scss</code>, line 34 </div> </section> </article>  <script src="kss-assets/kss.js"></script> <script src="kss-assets/scrollspy.js"></script> <script src="kss-assets/prettify.js"></script> <script src="kss-assets/kss-fullscreen.js"></script> <script src="kss-assets/kss-guides.js"></script> <script src="kss-assets/kss-markup.js"></script> <script> prettyPrint(); var spy = new ScrollSpy('#kss-node', { nav: '.kss-nav__menu-child > li > a', className: 'is-in-viewport' }); var kssFullScreen = new KssFullScreen({ idPrefix: 'kss-fullscreen-', bodyClass: 'kss-fullscreen-mode', elementClass: 'is-fullscreen' }); var kssGuides = new KssGuides({ bodyClass: 'kss-guides-mode' }); var kssMarkup = new KssMarkup({ bodyClass: 'kss-markup-mode', detailsClass: 'kss-markup' }); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="../build/assets/scripts/all.js"></script>  </body> </html>