bulma/docs/documentation/components/card.html

99 lines
2.3 KiB
HTML
Raw Normal View History

---
layout: documentation
doc-tab: components
doc-subtab: card
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Card</h1>
<h2 class="subtitle">An all-around flexible and composable component</h2>
<hr>
2016-10-30 17:35:39 +00:00
{% capture card_example %}
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/300x225.png" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-5">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
2016-10-30 17:35:39 +00:00
{% endcapture %}
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div>
<div class="column">
{% highlight html %}
{{card_example}}
{% endhighlight %}
2016-10-30 17:35:39 +00:00
</div>
</div>
<hr>
2016-10-30 17:35:39 +00:00
{% capture card_header_example %}
<div class="card">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
2016-10-30 17:35:39 +00:00
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
2016-10-30 17:35:39 +00:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
2016-10-30 17:35:39 +00:00
{% endcapture %}
<div class="columns">
<div class="column is-one-third">
{{card_header_example}}
</div>
<div class="column">
{% highlight html %}
{{card_header_example}}
{% endhighlight %}
2016-10-30 17:35:39 +00:00
</div>
</div>
</div>
</section>