bulma/docs/documentation/components/card.html

182 lines
4.5 KiB
HTML
Raw Normal View History

---
title: Card
layout: documentation
doc-tab: components
doc-subtab: card
2018-04-09 12:18:46 +00:00
breadcrumb:
- home
- documentation
- components
- components-card
meta:
2018-04-09 13:15:31 +00:00
variables: true
colors: false
sizes: false
---
2016-10-30 17:35:39 +00:00
{% capture card_example %}
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
2017-09-09 10:36:09 +00:00
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
2017-03-13 12:33:34 +00:00
<figure class="image is-48x48">
2017-09-09 10:36:09 +00:00
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
2016-12-23 12:20:58 +00:00
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2016-12-22 19:37:38 +00:00
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
2016-10-30 17:35:39 +00:00
{% endcapture %}
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 href="#" class="card-header-icon" aria-label="more options">
2016-10-30 17:35:39 +00:00
<span class="icon">
2018-01-10 16:30:23 +00:00
<i class="fas fa-angle-down" aria-hidden="true"></i>
2016-10-30 17:35:39 +00:00
</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>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
2016-10-30 17:35:39 +00:00
{% endcapture %}
2017-03-14 21:00:58 +00:00
{% capture card_title_example %}
<div class="card">
<div class="card-content">
<p class="title">
2017-03-14 22:25:22 +00:00
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
2017-03-14 21:00:58 +00:00
</p>
<p class="subtitle">
2017-03-14 22:25:22 +00:00
Jeff Atwood
2017-03-14 21:00:58 +00:00
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
2017-03-14 22:25:22 +00:00
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
<p class="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
2017-03-14 21:00:58 +00:00
</p>
</footer>
</div>
{% endcapture %}
2017-07-13 18:44:35 +00:00
2018-04-09 12:18:46 +00:00
<div class="content">
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
<ul>
<li>
<code>card</code>: the main container
2017-07-13 18:44:35 +00:00
<ul>
<li>
2018-04-09 12:18:46 +00:00
<code>card-header</code>: a horizontal bar with a shadow
2017-07-13 18:44:35 +00:00
<ul>
<li>
2018-04-09 12:18:46 +00:00
<code>card-header-title</code>: a left-aligned bold text
2017-07-13 18:44:35 +00:00
</li>
<li>
2018-04-09 12:18:46 +00:00
<code>card-header-icon</code>: a placeholder for an icon
2017-07-13 18:44:35 +00:00
</li>
2018-04-09 12:18:46 +00:00
</ul>
</li>
<li>
<code>card-image</code>: a fullwidth container for a responsive image
</li>
<li>
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
</li>
<li>
<code>card-footer</code>: a horizontal list of controls
<ul>
2017-07-13 18:44:35 +00:00
<li>
2018-04-09 12:18:46 +00:00
<code>card-footer-item</code>: a repeatable list item
2017-07-13 18:44:35 +00:00
</li>
</ul>
</li>
</ul>
2018-04-09 12:18:46 +00:00
</li>
</ul>
</div>
2017-09-18 22:36:41 +00:00
2018-04-09 12:18:46 +00:00
<div class="tags has-addons">
<span class="tag">New</span>
<span class="tag is-info">0.5.3</span>
</div>
2017-07-13 18:44:35 +00:00
2018-04-09 12:18:46 +00:00
<div class="content">
<p>
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
</p>
</div>
2017-07-13 18:44:35 +00:00
2018-04-09 12:18:46 +00:00
<hr>
2017-07-13 18:44:35 +00:00
2018-04-09 12:18:46 +00:00
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_example}}{% endhighlight %}
</div>
</div>
2017-07-13 18:44:35 +00:00
2018-04-09 12:18:46 +00:00
<hr>
2017-07-13 18:44:35 +00:00
2018-04-09 12:18:46 +00:00
<div class="columns">
<div class="column is-one-third">
{{card_header_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_header_example}}{% endhighlight %}
</div>
</div>
2016-10-30 17:35:39 +00:00
2018-04-09 12:18:46 +00:00
<hr>
2017-07-28 21:57:51 +00:00
2018-04-09 12:18:46 +00:00
<div class="columns">
<div class="column is-one-third">
{{card_title_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_title_example}}{% endhighlight %}
</div>
2018-04-09 12:18:46 +00:00
</div>
2018-04-09 21:25:26 +00:00
{% include elements/variables.html type='component' %}