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

Move docs to bulma repo (#299)

Browse Source 
* Add package files whitelist

* Add flex shrink

* Add flex shrink

* Add docs config

* Fix flex shrink

* Fix hero pages

* Add docs folder
This commit is contained in:
Jeremy Thomas
2016-09-11 12:00:49 +01:00
committed by GitHub
parent 1d9f6318a5
commit 9094eff30a
127 changed files with 21908 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
docs/documentation/components/card.html Normal file
View File

@@ -0,0 +1,134 @@
---
layout: documentation
doc-tab: components
doc-subtab: card
---
{% 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>
<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 %}
<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>
{% endhighlight %}
</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">
<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>
{% endhighlight %}
</div>
</div>
</div>
</section>