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

Add new breakpoint, Explain card

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-14 21:00:58 +00:00
parent 400dc82c40
commit 38d29ca5b0
10 changed files with 125 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,44 @@ doc-subtab: card
<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>
{% capture card_example %}
<div class="card">
<div class="card-image">
@@ -90,6 +128,36 @@ doc-subtab: card
<div class="column">
{% highlight html %}
{{card_header_example}}
{% endhighlight %}
</div>
</div>
<hr>
{% capture card_title_example %}
<div class="card">
<div class="card-content">
<p class="title">
If Tetris has taught me anything it's that errors pile up and accomplishments disappear.
</p>
<p class="subtitle">
Mark Twain
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>More quotes by <a href="#">Mark Twain</a></span>
</p>
</footer>
</div>
{% endcapture %}
<div class="columns">
<div class="column is-one-third">
{{card_title_example}}
</div>
<div class="column">
{% highlight html %}
{{card_title_example}}
{% endhighlight %}
</div>
</div>