library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
a831fd9524
bulma/docs/documentation/layout/hero.html
Jeremy Thomas 7c9f0a76dc Add Bulma book
2018-03-26 14:46:39 +01:00

657 lines
15 KiB
HTML
Raw Blame History

---
title: Hero
layout: documentation
doc-tab: layout
doc-subtab: hero
---
{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
<h1 class="title">Hero</h1>
<h2 class="subtitle">
An imposing <strong>hero banner</strong> to showcase something
</h2>
</div>
</section>
<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>
{% 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">
<h3 class="title">Colors</h3>
<h4 class="subtitle">
As with buttons, you can choose one of the <strong>7 different colors</strong>:
</h4>
</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">
<h3 class="title">
Gradients
<span class="tag is-warning">Experimental</span>
</h3>
<h4 class="subtitle">
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
</h4>
</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">
<h3 class="title">Sizes</h3>
<h4 class="subtitle">
You can have even more imposing banners by using one of <strong>3 different sizes</strong>
</h4>
</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">
Full Height title
</p>
<p class="subtitle">
Full Height 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">
Full Height title
</h1>
<h2 class="subtitle">
Full Height subtitle
</h2>
</div>
</div>
</section>
{% endhighlight %}
</section>
<section class="section">
<div class="container">
<h3 class="title">Full height hero</h3>
<h4 class="subtitle">And vertically centered</h4>
<div class="content">
<p>You can split the hero 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 snippet.html content=heroNavbarA horizontal=true more=true %}
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
</section>
Reference in New Issue View Git Blame Copy Permalink