mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
734 lines
17 KiB
HTML
734 lines
17 KiB
HTML
---
|
|
title: Hero
|
|
layout: documentation
|
|
hide_categories: true
|
|
hide_fortyfour: true
|
|
doc-tab: layout
|
|
doc-subtab: hero
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- layout
|
|
- layout-hero
|
|
meta:
|
|
colors: true
|
|
sizes: true
|
|
variables: false
|
|
---
|
|
|
|
<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:
|
|
</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>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
For the <a href="#full-height-hero">full height hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include layout/main-close.html show_categories=true %}
|
|
|
|
<section class="section is-fullwidth">
|
|
<div class="bd-example">
|
|
<section class="hero">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Hero title
|
|
</p>
|
|
<p class="subtitle">
|
|
Hero subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
{% highlight html %}
|
|
<section class="hero">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
Hero title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Hero subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endhighlight %}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
{% include elements/anchor.html name="Colors" %}
|
|
<div class="content">
|
|
As with buttons, you can choose one of the <strong>7 different colors</strong>:
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-fullwidth">
|
|
<div class="bd-example">
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Primary title
|
|
</p>
|
|
<p class="subtitle">
|
|
Primary subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
Primary title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Primary subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endhighlight %}
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-info">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Info title
|
|
</p>
|
|
<p class="subtitle">
|
|
Info subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-success">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Success title
|
|
</p>
|
|
<p class="subtitle">
|
|
Success subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-warning">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Warning title
|
|
</p>
|
|
<p class="subtitle">
|
|
Warning subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-danger">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Danger title
|
|
</p>
|
|
<p class="subtitle">
|
|
Danger subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-light">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Light title
|
|
</p>
|
|
<p class="subtitle">
|
|
Light subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-dark">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Dark title
|
|
</p>
|
|
<p class="subtitle">
|
|
Dark subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
{% include elements/anchor.html name="Gradients" %}
|
|
<div class="content">
|
|
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-fullwidth">
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-primary is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Primary bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Primary bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% highlight html %}
|
|
<section class="hero is-medium is-primary is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
Primary bold title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Primary bold subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endhighlight %}
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-info is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Info bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Info bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-success is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Success bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Success bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-warning is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Warning bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Warning bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-danger is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Danger bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Danger bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-light is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Light bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Light bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="bd-example">
|
|
<section class="hero is-medium is-dark is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Dark bold title
|
|
</p>
|
|
<p class="subtitle">
|
|
Dark bold subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
{% include elements/anchor.html name="Sizes" %}
|
|
<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>
|
|
|
|
<section class="section is-fullwidth">
|
|
<div class="bd-example">
|
|
<section class="hero is-primary is-medium">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Medium title
|
|
</p>
|
|
<p class="subtitle">
|
|
Medium subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<section class="hero is-primary is-medium">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
Medium title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Medium subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endhighlight %}
|
|
|
|
<div class="bd-example">
|
|
<section class="hero is-info is-large">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Large title
|
|
</p>
|
|
<p class="subtitle">
|
|
Large subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<section class="hero is-info is-large">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
Large title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Large subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endhighlight %}
|
|
|
|
<div class="bd-example is-fullwidth">
|
|
<section class="hero is-success is-fullheight">
|
|
<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 %}
|
|
</section>
|
|
|
|
<!-- Fullheight with navbar -->
|
|
<section class="section">
|
|
<div class="container">
|
|
{% include elements/anchor.html name="Fullheight with navbar" %}
|
|
{% include elements/new-tag.html version="0.7.2" %}
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="bd-example is-fullwidth">
|
|
{% include examples/navbar-basic.html %}
|
|
<section class="hero is-link is-fullheight-with-navbar">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Fullheight hero with navbar
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<section class="hero is-link is-fullheight-with-navbar">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p class="title">
|
|
Fullheight hero with navbar
|
|
</p>
|
|
</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>
|
|
<ul>
|
|
<li><code>hero-head</code> (always at the top)</li>
|
|
<li><code>hero-body</code> (always vertically centered)</li>
|
|
<li><code>hero-foot</code> (always at the bottom)</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% capture heroNavbarA %}
|
|
<section class="hero is-primary is-medium">
|
|
<!-- Hero head: will stick at the top -->
|
|
<div class="hero-head">
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item">
|
|
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
|
</a>
|
|
<span class="navbar-burger burger" data-target="navbarMenuHeroA">
|
|
<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>
|
|
<span class="navbar-item">
|
|
<a class="button is-primary is-inverted">
|
|
<span class="icon">
|
|
<i class="fab fa-github"></i>
|
|
</span>
|
|
<span>Download</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Hero content: will be in the middle -->
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h1 class="title">
|
|
Title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero footer: will stick at the bottom -->
|
|
<div class="hero-foot">
|
|
<nav class="tabs">
|
|
<div class="container">
|
|
<ul>
|
|
<li class="is-active"><a>Overview</a></li>
|
|
<li><a>Modifiers</a></li>
|
|
<li><a>Grid</a></li>
|
|
<li><a>Elements</a></li>
|
|
<li><a>Components</a></li>
|
|
<li><a>Layout</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
{% endcapture %}
|
|
|
|
{% capture heroNavbarB %}
|
|
<section class="hero is-info is-large">
|
|
<div class="hero-head">
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item">
|
|
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
|
</a>
|
|
<span class="navbar-burger burger" data-target="navbarMenuHeroB">
|
|
<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>
|
|
<span class="navbar-item">
|
|
<a class="button is-info is-inverted">
|
|
<span class="icon">
|
|
<i class="fab fa-github"></i>
|
|
</span>
|
|
<span>Download</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<p class="title">
|
|
Title
|
|
</p>
|
|
<p class="subtitle">
|
|
Subtitle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-foot">
|
|
<nav class="tabs is-boxed is-fullwidth">
|
|
<div class="container">
|
|
<ul>
|
|
<li class="is-active">
|
|
<a>Overview</a>
|
|
</li>
|
|
<li>
|
|
<a>Modifiers</a>
|
|
</li>
|
|
<li>
|
|
<a>Grid</a>
|
|
</li>
|
|
<li>
|
|
<a>Elements</a>
|
|
</li>
|
|
<li>
|
|
<a>Components</a>
|
|
</li>
|
|
<li>
|
|
<a>Layout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
{% endcapture %}
|
|
|
|
{% capture heroNavbarC %}
|
|
<section class="hero is-success is-fullheight">
|
|
<!-- Hero head: will stick at the top -->
|
|
<div class="hero-head">
|
|
<header class="navbar">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item">
|
|
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
|
</a>
|
|
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
|
|
<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>
|
|
<span class="navbar-item">
|
|
<a class="button is-success is-inverted">
|
|
<span class="icon">
|
|
<i class="fab fa-github"></i>
|
|
</span>
|
|
<span>Download</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<!-- Hero content: will be in the middle -->
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h1 class="title">
|
|
Title
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
Subtitle
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero footer: will stick at the bottom -->
|
|
<div class="hero-foot">
|
|
<nav class="tabs is-boxed is-fullwidth">
|
|
<div class="container">
|
|
<ul>
|
|
<li class="is-active"><a>Overview</a></li>
|
|
<li><a>Modifiers</a></li>
|
|
<li><a>Grid</a></li>
|
|
<li><a>Elements</a></li>
|
|
<li><a>Components</a></li>
|
|
<li><a>Layout</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
{% endcapture %}
|
|
|
|
<section class="section is-fullwidth">
|
|
{% include elements/snippet.html content=heroNavbarA horizontal=true more=true %}
|
|
{% include elements/snippet.html content=heroNavbarB horizontal=true more=true %}
|
|
{% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
|
|
</section>
|
|
|
|
{% include layout/main-open.html %}
|
|
|
|
{% include elements/variables.html type='component' hide_content=true %}
|