mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
99 lines
2.3 KiB
HTML
99 lines
2.3 KiB
HTML
---
|
|
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>
|
|
|
|
{% 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>
|
|
{% endcapture %}
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
{{card_example}}
|
|
</div>
|
|
<div class="column">
|
|
{% highlight html %}
|
|
{{card_example}}
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
{% capture card_header_example %}
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<p class="card-header-title">
|
|
Component
|
|
</p>
|
|
<a class="card-header-icon">
|
|
<span class="icon">
|
|
<i class="fa fa-angle-down"></i>
|
|
</span>
|
|
</a>
|
|
</header>
|
|
<div class="card-content">
|
|
<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>
|
|
<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>
|
|
{% endcapture %}
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
{{card_header_example}}
|
|
</div>
|
|
<div class="column">
|
|
{% highlight html %}
|
|
{{card_header_example}}
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|