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

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

49
docs/documentation/layout/section.html
View File

@@ -1,6 +1,7 @@
---
title: Section
layout: documentation
fullwidth: true
doc-tab: layout
doc-subtab: section
breadcrumb:
@@ -11,26 +12,48 @@ breadcrumb:
---
{% capture section_example %}
<body>
<section class="section">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
</h2>
</div>
</section>
</body>
<section class="section">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
</h2>
</section>
{% endcapture %}
{% capture section_medium_example %}
<section class="section is-medium">
<h1 class="title">Medium section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
</h2>
</section>
{% endcapture %}
{% capture section_large_example %}
<section class="section is-large">
<h1 class="title">Large section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
</h2>
</section>
{% endcapture %}
<div class="content">
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
<p>
The <code>section</code> components are simple layout elements with responsive padding. They are best used as <strong>direct</strong> children of <code>body</code>.
</p>
</div>
{% highlight html %}{{ section_example }}{% endhighlight %}
{% include elements/snippet.html content=section_example horizontal=true fullwidth=true %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
</div>
{% include elements/variables.html %}
{% include elements/snippet.html content=section_medium_example horizontal=true fullwidth=true %}
{% include elements/snippet.html content=section_large_example horizontal=true fullwidth=true %}
{% include components/variables.html %}