mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
194 lines
4.9 KiB
HTML
194 lines
4.9 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: components
|
|
doc-subtab: card
|
|
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
|
|
---
|
|
|
|
{% capture card_example %}
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<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.
|
|
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
|
<a>#css</a> <a>#responsive</a>
|
|
<br>
|
|
<small>11:09 PM - 1 Jan 2016</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% 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>@bulmaio</a>. <a>#css</a> <a>#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 %}
|
|
|
|
{% capture card_title_example %}
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="title">
|
|
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
|
</p>
|
|
<p class="subtitle">
|
|
Jeff Atwood
|
|
</p>
|
|
</div>
|
|
<footer class="card-footer">
|
|
<p class="card-footer-item">
|
|
<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>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% 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>
|
|
{%
|
|
include meta.html
|
|
variables=true
|
|
colors=false
|
|
sizes=false
|
|
%}
|
|
|
|
<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>
|
|
|
|
{% include variables.html %}
|
|
|
|
</div>
|
|
</section>
|