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

Fix media object

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 17:35:39 +00:00
parent 36822ed3fb
commit 4a40ad0059
12 changed files with 198 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,37 +13,7 @@ doc-subtab: card
<hr>
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="http://placehold.it/300x225" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<img src="http://placehold.it/64x64" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-5">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 href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
</div>
<div class="column">
{% highlight html %}
{% capture card_example %}
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
@@ -72,51 +42,36 @@ doc-subtab: card
</div>
</div>
</div>
{% endcapture %}
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div>
<div class="column">
{% highlight html %}
{{card_example}}
{% endhighlight %}
</div>
</div>
</div>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
<i class="fa fa-angle-down"></i>
</a>
</header>
<div class="card-content">
<div class="content">
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>
<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>
</div>
<div class="column">
{% highlight html %}
<div class="card is-fullwidth">
{% capture card_header_example %}
<div class="card">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
<i class="fa fa-angle-down"></i>
<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 href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
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>
<small>11:09 PM - 1 Jan 2016</small>
</div>
@@ -127,8 +82,17 @@ doc-subtab: card
<a class="card-footer-item">Delete</a>
</footer>
</div>
{% endcapture %}
<div class="columns">
<div class="column is-one-third">
{{card_header_example}}
</div>
<div class="column">
{% highlight html %}
{{card_header_example}}
{% endhighlight %}
</div>
</div>
</div>
</div>
</div>
</section>