holakit

<!DOCTYPE html> <html class="no-js hola-html-reset hola-var" lang="en"> <head> <meta charset="utf-8"> <title>HolaKit</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/holakit.css"> </head> <body id="kss-node" class="hola-body-typography hola-grey-bg"> <div class="kss-sidebar kss-style"> <header class="kss-header"> <h1 class="kss-doc-title">HolaKit</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-buttons"> <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-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-basic"> <span class="kss-nav__ref kss-nav__ref-child">1.2.1</span ><span class="kss-nav__name">Basic Card</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-cards-stacks"> <span class="kss-nav__ref kss-nav__ref-child">1.2.2</span ><span class="kss-nav__name">Card Stack</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-components.html#kssref-components-info-sheet"> <span class="kss-nav__ref ">1.3</span ><span class="kss-nav__name">Info Sheet</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-buttons" 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-buttons"> <span class="kss-title__ref"> 1.1 <span class="kss-title__permalink-hash"> #Components - Buttons </span> </span> Buttons </a> </h2> <p class="kss-toolbar"> <a href="#kssref-components-buttons" data-kss-fullscreen="kssref-components-buttons"> <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-buttons.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-buttons" 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-buttons" 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>Buttons are one of the most used components. It's the very basic way that users can interact with an application. Currently HolaKit provides 3 kinds of button: Normal buttons, primary buttons and Ghost buttons.</p> <ul> <li><strong>Normal Buttons</strong>: For general purpose.</li> <li><strong>Primary Buttons</strong>: For primary operations. Normally in a row of buttons, you have at least one primary buttons, for the most frequent usage.</li> <li><strong>Ghost Buttons</strong>: For banner and heroes. It's kind of call-to-action.</li> </ul> <p>All buttons classes can be apply to form submits (<code><input type="submit"></code>), HTML buttons (<code><button></code>) and links (<code><a></code>). In many cases you can also use just a bare <code>a.hola-button</code>, for links in a row with other buttons to be properly aligned.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <p> <input type="submit" class="hola-button hola-button-normal" value="表单提交"> <button class="hola-button hola-button-normal"><button> 组件</button> <a href="#" class="hola-button hola-button-normal">链接按钮</a> </p> <p> <a href="#" class="hola-button hola-button-primary">Primary Button</a> <a href="#" class="hola-button hola-button-ghost">Ghost Button</a> </p> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>components/button.html</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><p> <input type="submit" class="hola-button hola-button-normal" value="表单提交"> <button class="hola-button hola-button-normal">&lt;button&gt; 组件</button> <a href="#" class="hola-button hola-button-normal">链接按钮</a> </p> <p> <a href="#" class="hola-button hola-button-primary">Primary Button</a> <a href="#" class="hola-button hola-button-ghost">Ghost Button</a> </p></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/button.css</code>, line 1 </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> <div class="kss-description"> <p>Cards are the basic content blocks in HolaKit. You will be using it in most cases you need to host some content.</p> </div> </div> <div class="kss-source kss-style"> Source: <code>components/card/index.css</code>, line 1 </div> </section> <section id="kssref-components-cards-basic" 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-basic"> <span class="kss-title__ref"> 1.2.1 <span class="kss-title__permalink-hash"> #Components - Cards - Basic </span> </span> Basic Card </a> </h3> <p class="kss-toolbar"> <a href="#kssref-components-cards-basic" data-kss-fullscreen="kssref-components-cards-basic"> <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-basic.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-basic" 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-basic" 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>Card components are blocks by default. We don't suggest using them as inlines or inline-blocks. Normally you would just wrap cards in card stack or get them in layouts so they won't get too wide. In some cases you want to wrap cards directly in containers: Fine, but don't do it every where, since cards can be too wide for desktop users. In the following example page, we explictly get a max width for demostration purpose.</p> <p>Cards can't be too narrow too; Because we have great padding around cards, if you get 4 or more columns in a container, the whole page may looks too messy, and lines in each column will be too short for a comfortable reading experience.</p> <p>Of course titles are accepted in cards and you will use them frequently. We also get head images for cards, and even pure image cards. Go ahead and make your app vivid.</p> <p>We have patched cards for being used in links; Feel free to use them as clickable items, but don't use them as buttons. For example, you can use linked cards as article items in a list page of blog, but don't use a card titled "Click Here" as an action button. Card always contains some actual data, instead of pure commands / verbs.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <div class="hola-card-stack" style="max-width: 300px"> <div class="hola-card"> <p>Basic Card Component</p> <p>俱往矣，数风流人物，还看今朝。</p> </div> <div class="hola-card"> <h2 class="hola-card-title">Titled Card</h2> <p>Of course, cards can have a proper title.</p> </div> <div class="hola-card hola-card-with-image"> <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image"> <h2 class="hola-card-title">Card with image</h2> <p>Card can comes with images. Make sure you have proper class set.</p> </div> <div class="hola-card hola-card-full-image"> <img src="https://source.unsplash.com/featured/?sky" alt="Photo from Unsplash" class="hola-image"> </div> </div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>components/card/card.html</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="hola-card-stack" style="max-width: 300px"> <div class="hola-card"> <p>Basic Card Component</p> <p>俱往矣，数风流人物，还看今朝。</p> </div> <div class="hola-card"> <h2 class="hola-card-title">Titled Card</h2> <p>Of course, cards can have a proper title.</p> </div> <div class="hola-card hola-card-with-image"> <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image"> <h2 class="hola-card-title">Card with image</h2> <p>Card can comes with images. Make sure you have proper class set.</p> </div> <div class="hola-card hola-card-full-image"> <img src="https://source.unsplash.com/featured/?sky" alt="Photo from Unsplash" class="hola-image"> </div> </div> </code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/card/card.css</code>, line 1 </div> </section> <section id="kssref-components-cards-stacks" 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-stacks"> <span class="kss-title__ref"> 1.2.2 <span class="kss-title__permalink-hash"> #Components - Cards - Stacks </span> </span> Card Stack </a> </h3> <p class="kss-toolbar"> <a href="#kssref-components-cards-stacks" data-kss-fullscreen="kssref-components-cards-stacks"> <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-stacks.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-stacks" 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-stacks" 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>You have seen this in the basic section. But card stacks are more than a container of cards.</p> <p>We have card stack titles to name the whole stack of cards, and they can be in both light and dark versions. In most cases you use dark versions, but in case you're using our hero component, you may need to set the first stack title to light version to match the dark blue extended hero background. Things can be much different when you're using a picture for heros, or a custom primary color. Try both color version to decide which suits best.</p> <p>Card stacks can be used in combination with columns, and we automatically handle card margins to have correct shadow rendering - browsers wraps not only content but also any display effect applied to content in columns. Be aware, currently we only support using card stack columns directly under <code>hola-container</code>.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <div style="background: #3498db; padding: 2rem;"> <h3 class="hola-card-stack-title hola-card-stack-title-light">Stack Title Light</h3> </div> <h3 class="hola-card-stack-title">Stack Title</h3> <div class="hola-card-stack" style="max-width: 300px"> <div class="hola-card">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, sequi.</div> <div class="hola-card">Praesentium odio, voluptate nihil dolore repellat, aperiam quae adipisci numquam.</div> <div class="hola-card">Saepe sequi iste neque, voluptatum quidem ducimus placeat obcaecati eum.</div> </div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>components/card/stack.html</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div style="background: #3498db; padding: 2rem;"> <h3 class="hola-card-stack-title hola-card-stack-title-light">Stack Title Light</h3> </div> <h3 class="hola-card-stack-title">Stack Title</h3> <div class="hola-card-stack" style="max-width: 300px"> <div class="hola-card">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, sequi.</div> <div class="hola-card">Praesentium odio, voluptate nihil dolore repellat, aperiam quae adipisci numquam.</div> <div class="hola-card">Saepe sequi iste neque, voluptatum quidem ducimus placeat obcaecati eum.</div> </div> </code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/card/stack.css</code>, line 1 </div> </section> <section id="kssref-components-info-sheet" 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-info-sheet"> <span class="kss-title__ref"> 1.3 <span class="kss-title__permalink-hash"> #Components - Info Sheet </span> </span> Info Sheet </a> </h2> <p class="kss-toolbar"> <a href="#kssref-components-info-sheet" data-kss-fullscreen="kssref-components-info-sheet"> <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-info-sheet.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-info-sheet" 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-info-sheet" 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>Info Sheet is simply designed for displaying key-value-paired data. It's only for plain text data and you should never try to embed any other compoents in it, except badges. It's great for showing something like a ticket or pass. Also make sure that your key should be concise; Longer key may result in a ugly multiline label.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <div class="hola-infosheet"> <div class="hola-infosheet-row"> <span class="hola-infosheet-key">用户名</span> <p class="hola-infosheet-value">laosb</p> </div> <div class="hola-infosheet-row"> <span class="hola-infosheet-key">手机号码</span> <p class="hola-infosheet-value">+1 (555) 555 5555</p> </div> <div class="hola-infosheet-row"> <span class="hola-infosheet-key">备注</span> <p class="hola-infosheet-value">并不住在美国，但是用着一个美国手机号。他是 Holakit 的最初作者及维护者，常常诈尸。</p> </div> </div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>components/infosheet.html</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="hola-infosheet"> <div class="hola-infosheet-row"> <span class="hola-infosheet-key">用户名</span> <p class="hola-infosheet-value">laosb</p> </div> <div class="hola-infosheet-row"> <span class="hola-infosheet-key">手机号码</span> <p class="hola-infosheet-value">+1 (555) 555 5555</p> </div> <div class="hola-infosheet-row"> <span class="hola-infosheet-key">备注</span> <p class="hola-infosheet-value">并不住在美国，但是用着一个美国手机号。他是 Holakit 的最初作者及维护者，常常诈尸。</p> </div> </div></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/infosheet.css</code>, line 1 </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>  </body> </html>