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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,11 +51,11 @@ meta:
<p class="card-header-title">
Component
</p>
<a href="#" class="card-header-icon" aria-label="more options">
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</header>
<div class="card-content">
<div class="content">
@@ -140,37 +140,83 @@ meta:
</p>
</div>
<hr>
{% include elements/snippet.html content=card_example size="1-2" %}
<div class="columns">
<div class="column is-one-third">
{{card_example}}
</div>
<div class="column highlight-full">
{% highlight html %}{{card_example}}{% endhighlight %}
</div>
<!-- -->
{% include elements/anchor.html name="Card parts" %}
<div class="content">
<p>The <code>card-header</code> can have a <strong>title</strong> and a Bulma <code>icon</code>:</p>
</div>
<hr>
{% capture card_image %}
<div class="card">
<header class="card-header">
<p class="card-header-title">
Card header
</p>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</header>
</div>
{% endcapture %}
<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>
{% include elements/snippet.html content=card_image size="1-2" %}
<div class="content">
<p>The <code>card-image</code> is a container for a Bulma <code>image</code> element:</p>
</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 %}
{% capture card_image %}
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
</div>
{% endcapture %}
{% include elements/variables.html type='component' %}
{% include elements/snippet.html content=card_image size="1-2" %}
<div class="content">
<p>The <code>card-content</code> is the main part, ideal for <strong>text content</strong>, thanks to its padding:</p>
</div>
{% capture card_image %}
<div class="card">
<div class="card-content">
<div class="content">
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
</div>
</div>
</div>
{% endcapture %}
{% include elements/snippet.html content=card_image size="1-2" %}
<div class="content">
<p>The <code>card-footer</code> acts as a list of for several <code>card-footer-item</code> elements:</p>
</div>
{% capture card_footer %}
<div class="card">
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
{% endcapture %}
{% include elements/snippet.html content=card_footer size="1-2" %}
{% include elements/anchor.html name="Examples" %}
{% include elements/snippet.html content=card_header_example size="1-2" %}
{% include elements/snippet.html content=card_title_example size="1-2" %}
{% include components/variables.html type='component' %}