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

Add fullheight hero with navbar documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2018-10-07 17:46:48 +02:00
parent b3bf4ea1cf
commit 462336f602
3 changed files with 103 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
docs/documentation/layout/hero.html
View File

@@ -13,7 +13,7 @@ breadcrumb:
meta:
colors: true
sizes: true
variables: true
variables: false
---
<div class="content">
@@ -76,9 +76,9 @@ meta:
<section class="section">
<div class="container">
{% include elements/anchor.html name="Colors" %}
<h4 class="subtitle">
As with buttons, you can choose one of the <strong>7 different colors</strong>:
</h4>
<div class="content">
As with buttons, you can choose one of the <strong>7 different colors</strong>:
</div>
</div>
</section>
@@ -207,9 +207,9 @@ meta:
<section class="section">
<div class="container">
{% include elements/anchor.html name="Gradients" %}
<h4 class="subtitle">
<div class="content">
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
</h4>
</div>
</div>
</section>
@@ -331,9 +331,22 @@ meta:
<section class="section">
<div class="container">
{% include elements/anchor.html name="Sizes" %}
<h4 class="subtitle">
You can have even more imposing banners by using one of <strong>3 different sizes</strong>
</h4>
<div class="content">
<p>
You can have even more imposing banners by using one of <strong>3 different sizes</strong>:
</p>
<ul>
<li>
medium
</li>
<li>
large
</li>
<li>
fullheight
</li>
</ul>
</div>
</div>
</section>
@@ -403,10 +416,10 @@ meta:
<div class="hero-body">
<div class="container">
<p class="title">
Full Height title
Fullheight title
</p>
<p class="subtitle">
Full Height subtitle
Fullheight subtitle
</p>
</div>
</div>
@@ -418,10 +431,10 @@ meta:
<div class="hero-body">
<div class="container">
<h1 class="title">
Full Height title
Fullheight title
</h1>
<h2 class="subtitle">
Full Height subtitle
Fullheight subtitle
</h2>
</div>
</div>
@@ -429,12 +442,56 @@ meta:
{% endhighlight %}
</section>
<!-- Fullheight with navbar -->
<section class="section">
<div class="container">
{% include elements/anchor.html name="Full height hero" %}
<h4 class="subtitle">And vertically centered</h4>
{% include elements/anchor.html name="Fullheight with navbar" %}
{% include elements/new-tag.html version="0.7.2" %}
<div class="content">
<p>You can split the hero in <strong>3 vertical parts</strong>:</p>
<p>
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
</p>
</div>
</div>
</section>
<div class="bd-example is-fullwidth">
{% include examples/navbar-basic.html %}
<section class="hero is-success is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<p class="title">
Fullheight title
</p>
<p class="subtitle">
Fullheight subtitle
</p>
</div>
</div>
</section>
</div>
{% highlight html %}
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container">
<h1 class="title">
Fullheight title
</h1>
<h2 class="subtitle">
Fullheight subtitle
</h2>
</div>
</div>
</section>
{% endhighlight %}
<!-- Fullheight with 3 parts -->
<section class="section">
<div class="container">
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
<div class="content">
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
<ul>
<li>
<code>hero</code>
@@ -679,4 +736,4 @@ meta:
{% include layout/main-open.html %}
{% include elements/variables.html type='component' %}
{% include elements/variables.html type='component' hide_content=true %}