1
0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
chota/docs/_includes/card.html
Jenil Gogari 963481fa2d docs
2017-04-02 23:30:59 -04:00

51 lines
1.5 KiB
HTML

<section id="card">
<h4>Card</h4>
<p>The <code>.card</code> element is simply a container with a shadow, a border, a radius, and some padding.</p>
<p>You can add a simple <code>header</code> element with a heading tag in it to add a heading to the card.</p>
<div class="row is-center">
<div class="col">
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cumque velit id.</p>
</div>
</div>
<div class="col">
{% highlight html %}
<div class="card">
<p>Lorem ipsum ... nostrud exercit.</p>
</div>
{% endhighlight %}
</div>
</div>
<hr>
<div class="row is-center">
<div class="col-6">
<div class="card">
<header>
<h4>Card title</h4>
</header>
<p>A nisi ullam impedit molestiae, sapiente id, numquam accusantium eius cum, iste eum iusto blanditiis doloribus beatae. Molestias iste explicabo libero nam, voluptas harum ipsum quod velit enim. Quae, cupiditate?</p>
<footer class="is-right">
<a href="#!" class="button primary">Submit</a>
<a href="#!" class="button">Cancel</a>
</footer>
</div>
</div>
</div>
<div class="row is-center">
<div class="col">
{% highlight html %}
<div class="card">
<header>
<h4>Card title</h4>
</header>
<p>A nisi ullam ... cupiditate?</p>
<footer class="is-right">
<a class="button primary">Submit</a>
<a class="button">Cancel</a>
</footer>
</div>
{% endhighlight %}
</div>
</div>
</section>