Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 19:34:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Component links

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 13:18:46 +01:00
parent 0f9d338f66
commit e75fd365e3
11 changed files with 1110 additions and 1160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
docs/documentation/components/card.html
View File

@@ -1,8 +1,18 @@
---
title: Card
subtile: "An all-around flexible and composable component"
layout: documentation
doc-tab: components
doc-subtab: card
breadcrumb:
- home
- documentation
- components
- components-card
meta:
- variables: true
- colors: false
- sizes: false
---
{% capture card_example %}
@@ -89,102 +99,84 @@ doc-subtab: card
</div>
{% endcapture %}
{% include subnav/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>
<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</code>: the main container
<code>card-header</code>: a horizontal bar with a shadow
<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>
<code>card-header-title</code>: a left-aligned bold text
</li>
<li>
<code>card-image</code>: a fullwidth container for a responsive image
<code>card-header-icon</code>: a placeholder for an icon
</li>
</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>
<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>
<code>card-footer-item</code>: a repeatable list item
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="tags has-addons">
<span class="tag">New</span>
<span class="tag is-info">0.5.3</span>
</div>
<div class="tags has-addons">
<span class="tag">New</span>
<span class="tag is-info">0.5.3</span>
</div>
<div class="content">
<p>
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
</p>
</div>
<div class="content">
<p>
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
</p>
</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 type='component' %}
<hr>
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div>
</section>
<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 type='component' %}