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

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,88 +1,87 @@
---
title: Hero
layout: documentation
layout: docs
theme: library
fullwidth: true
hide_categories: true
hide_fortyfour: true
doc-tab: layout
doc-subtab: hero
breadcrumb:
- home
- documentation
- layout
- layout-hero
- home
- documentation
- layout
- layout-hero
meta:
colors: true
sizes: true
variables: true
---
<div class="content">
<p>
The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally cover the full height of the page as well.
</p>
<p>
The basic requirement of this component are:
The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally
cover the full height of the page as well.
</p>
<p>The basic requirement of this component are:</p>
<ul>
<li>
<code>hero</code> as the main container
<ul>
<li>
<code>hero-body</code> as a direct child, in which you can put all your content
</li>
<li><code>hero-body</code> as a direct child, in which you can put all your content</li>
</ul>
</li>
</ul>
<p>
For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a
<code>hero-foot</code>.
</p>
</div>
{% capture hero_example %}
<section class="hero">
<div class="hero-body">
<p class="title">
Hero title
</p>
<p class="subtitle">
Hero subtitle
</p>
<p class="title">Hero title</p>
<p class="subtitle">Hero subtitle</p>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=hero_example horizontal=true fullwidth=true %}
{% include elements/anchor.html name="Colors" %}
{%
include docs/elements/snippet.html content=hero_example
horizontal=true fullwidth=true
%}
{%
include docs/elements/anchor.html
name="Colors"
%}
<div class="content">
As with buttons, you can choose one of the <strong>8 different colors</strong>:
As with buttons, you can choose one of the
<strong>8 different colors</strong>:
</div>
{% for color in site.data.colors.justColors %}
{% capture foobar %}
{% capture foobar %}
<section class="hero is-{{ color }}">
<div class="hero-body">
<p class="title">
{{ color | capitalize }} hero
</p>
<p class="subtitle">
{{ color | capitalize }} subtitle
</p>
<p class="title">{{ color | capitalize }} hero</p>
<p class="subtitle">{{ color | capitalize }} subtitle</p>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=foobar horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html content=foobar
horizontal=true fullwidth=true
%}
{% endfor %}
<!-- -->
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/anchor.html name="Sizes" %}
<div class="content">
<p>
You can have even more imposing banners by using one of <strong>5 different sizes</strong>:
You can have even more imposing banners by using one of
<strong>5 different sizes</strong>:
</p>
<ul>
<li><code>is-small</code></li>
@@ -96,47 +95,39 @@ meta:
{% capture small_hero %}
<section class="hero is-small is-primary">
<div class="hero-body">
<p class="title">
Small hero
</p>
<p class="subtitle">
Small subtitle
</p>
<p class="title">Small hero</p>
<p class="subtitle">Small subtitle</p>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=small_hero horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html content=small_hero
horizontal=true fullwidth=true
%}
{% capture medium_hero %}
<section class="hero is-medium is-link">
<div class="hero-body">
<p class="title">
Medium hero
</p>
<p class="subtitle">
Medium subtitle
</p>
<p class="title">Medium hero</p>
<p class="subtitle">Medium subtitle</p>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=medium_hero horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html content=medium_hero
horizontal=true fullwidth=true
%}
{% capture large_hero %}
<section class="hero is-large is-info">
<div class="hero-body">
<p class="title">
Large hero
</p>
<p class="subtitle">
Large subtitle
</p>
<p class="title">Large hero</p>
<p class="subtitle">Large subtitle</p>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=large_hero horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html content=large_hero
horizontal=true fullwidth=true
%}
<div id="halfheight-hero"></div>
@@ -144,18 +135,16 @@ meta:
<section class="hero is-success is-halfheight">
<div class="hero-body">
<div class="">
<p class="title">
Half height hero
</p>
<p class="subtitle">
Half height subtitle
</p>
<p class="title">Half height hero</p>
<p class="subtitle">Half height subtitle</p>
</div>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=halfheight_example horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html
content=halfheight_example horizontal=true fullwidth=true
%}
<div id="fullheight-hero"></div>
@@ -163,48 +152,51 @@ meta:
<section class="hero is-danger is-fullheight">
<div class="hero-body">
<div class="">
<p class="title">
Fullheight hero
</p>
<p class="subtitle">
Fullheight subtitle
</p>
<p class="title">Fullheight hero</p>
<p class="subtitle">Fullheight subtitle</p>
</div>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=fullheight_example horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html
content=fullheight_example horizontal=true fullwidth=true
%}
<!-- Fullheight with navbar -->
{% include elements/anchor.html name="Fullheight with navbar" %}
{% include docs/elements/anchor.html name="Fullheight with navbar" %}
<div class="content">
<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.
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>
{% capture fullheight_with_navbar_example %}
{% include examples/navbar-basic.html %}
{% capture fullheight_with_navbar_example %} {% include
docs/examples/navbar-basic.html %}
<section class="hero is-link is-fullheight-with-navbar">
<div class="hero-body">
<p class="title">
Fullheight hero with navbar
</p>
<p class="title">Fullheight hero with navbar</p>
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=fullheight_with_navbar_example horizontal=true fullwidth=true %}
{%
include docs/elements/snippet.html
content=fullheight_with_navbar_example horizontal=true fullwidth=true
%}
<!-- Fullheight with 3 parts -->
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
{% include docs/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>
<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>
@@ -225,25 +217,20 @@ meta:
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
</a>
<span class="navbar-burger" data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
Home
</a>
<a class="navbar-item">
Examples
</a>
<a class="navbar-item">
Documentation
</a>
<a class="navbar-item is-active"> Home </a>
<a class="navbar-item"> Examples </a>
<a class="navbar-item"> Documentation </a>
<span class="navbar-item">
<a class="button is-primary is-inverted">
<span class="icon">
@@ -261,12 +248,8 @@ meta:
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</div>
</div>
@@ -287,7 +270,6 @@ meta:
</div>
</section>
{% endcapture %}
{% capture heroNavbarB %}
<section class="hero is-info is-large">
<div class="hero-head">
@@ -295,25 +277,20 @@ meta:
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
</a>
<span class="navbar-burger" data-target="navbarMenuHeroB">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroB" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
Home
</a>
<a class="navbar-item">
Examples
</a>
<a class="navbar-item">
Documentation
</a>
<a class="navbar-item is-active"> Home </a>
<a class="navbar-item"> Examples </a>
<a class="navbar-item"> Documentation </a>
<span class="navbar-item">
<a class="button is-info is-inverted">
<span class="icon">
@@ -330,12 +307,8 @@ meta:
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</div>
</div>
@@ -367,7 +340,6 @@ meta:
</div>
</section>
{% endcapture %}
{% capture heroNavbarC %}
<section class="hero is-success is-fullheight">
<!-- Hero head: will stick at the top -->
@@ -376,25 +348,20 @@ meta:
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
</a>
<span class="navbar-burger" data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroC" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
Home
</a>
<a class="navbar-item">
Examples
</a>
<a class="navbar-item">
Documentation
</a>
<a class="navbar-item is-active"> Home </a>
<a class="navbar-item"> Examples </a>
<a class="navbar-item"> Documentation </a>
<span class="navbar-item">
<a class="button is-success is-inverted">
<span class="icon">
@@ -412,12 +379,8 @@ meta:
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</div>
</div>
@@ -438,9 +401,15 @@ meta:
</div>
</section>
{% endcapture %}
{% include elements/snippet.html content=heroNavbarA horizontal=true fullwidth=true more=true %}
{% include elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true more=true %}
{% include elements/snippet.html content=heroNavbarC horizontal=true fullwidth=true more=true %}
{% include components/variables.html type='component' hide_content=true %}
{%
include docs/elements/snippet.html content=heroNavbarA
horizontal=true fullwidth=true more=true
%}
{%
include docs/elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true
more=true
%}
{%
include docs/elements/snippet.html content=heroNavbarC
horizontal=true fullwidth=true more=true
%}