bulma/docs/documentation/components/card.html

194 lines
5.1 KiB
HTML
Raw Normal View History

---
layout: documentation
doc-tab: components
doc-subtab: card
2017-07-28 21:57:51 +00:00
variables:
- name: $card-color
value: $text
- name: $card-background-color
value: $white
- name: $card-shadow
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
- name: $card-header-color
value: $text-strong
- name: $card-header-shadow
value: 0 1px 2px rgba($black, 0.1)
- name: $card-header-weight
value: $weight-bold
- name: $card-footer-border-top
value: 1px solid $border
---
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">
<i class="fa 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
{% 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>
2017-07-28 21:57:51 +00:00
{%
include meta.html
variables=true
colors=false
sizes=false
%}
2017-07-13 18:44:35 +00:00
<hr>
<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
<ul>
<li>
<code>card-header</code>: a horizontal bar with a shadow
<ul>
<li>
<code>card-header-title</code>: a left-aligned bold text
</li>
<li>
<code>card-header-icon</code>: a placeholder for an icon
</li>
</ul>
</li>
<li>
<code>card-image</code>: a fullwidth container for a reponsive 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>
<li>
<code>card-footer-item</code>: a repeatable list item
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_example}}{% endhighlight %}
</div>
</div>
<hr>
<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>
<hr>
<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>
</div>
2016-10-30 17:35:39 +00:00
2017-07-28 21:57:51 +00:00
{% include variables.html %}
</div>
</section>