holakit
Version:
Yet another design-driven UI component set.
182 lines (157 loc) • 8.13 kB
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 kss-fullscreen-mode">
<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>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-components-cards-stacks" class="kss-section kss-section--depth-3 is-fullscreen">
<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-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>
</div>
</article>
<!-- SCRIPTS -->
<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>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>