히어로

히어로 (Hero)

hero 컴포넌트는 웹페이지에 전체 너비 배너를 추가해 주고, 선택적으로 페이지 전체 높이를 덮을 수도 있어요. 색상과 크기를 조절하는 방법도 함께 정리해 볼게요.

출처: 문서

본문

hero 컴포넌트는 웹페이지에 전체 너비 배너를 추가하고, 선택적으로 페이지 전체 높이를 덮을 수도 있어요. 이 컴포넌트의 기본 구성은 다음과 같습니다.

• hero: 메인 컨테이너
• hero-body: 직계 자식으로, 모든 콘텐츠를 담는 곳

전체 높이(fullheight) 히어로를 쓰려면 hero-head와 hero-foot도 필요해요.

Example

Hero title / Hero subtitle

HTML

<section class="hero">
<div class="hero-body">
<p class="title">Hero title</p>
<p class="subtitle">Hero subtitle</p>
</div>
</section>

색상 (Colors)

버튼과 마찬가지로 8가지 색상 중 하나를 선택할 수 있어요.

Example

Link hero / Link subtitle

HTML

<section class="hero is-link">
<div class="hero-body">
<p class="title">Link hero</p>
<p class="subtitle">Link subtitle</p>
</div>
</section>

Example

Primary hero / Primary subtitle

HTML

<section class="hero is-primary">
<div class="hero-body">
<p class="title">Primary hero</p>
<p class="subtitle">Primary subtitle</p>
</div>
</section>

Example

Info hero / Info subtitle

HTML

<section class="hero is-info">
<div class="hero-body">
<p class="title">Info hero</p>
<p class="subtitle">Info subtitle</p>
</div>
</section>

Example

Success hero / Success subtitle

HTML

<section class="hero is-success">
<div class="hero-body">
<p class="title">Success hero</p>
<p class="subtitle">Success subtitle</p>
</div>
</section>

Example

Warning hero / Warning subtitle

HTML

<section class="hero is-warning">
<div class="hero-body">
<p class="title">Warning hero</p>
<p class="subtitle">Warning subtitle</p>
</div>
</section>

Example

Danger hero / Danger subtitle

HTML

<section class="hero is-danger">
<div class="hero-body">
<p class="title">Danger hero</p>
<p class="subtitle">Danger subtitle</p>
</div>
</section>

크기 (Sizes)

5가지 크기 중 하나를 사용하면 훨씬 더 인상적인 배너를 만들 수 있어요.

• is-small
• is-medium
• is-large
• is-halfheight
• is-fullheight

Example

Small hero / Small subtitle

HTML

<section class="hero is-small is-primary">
<div class="hero-body">
<p class="title">Small hero</p>
<p class="subtitle">Small subtitle</p>
</div>
</section>

Example

Medium hero / Medium subtitle

HTML

<section class="hero is-medium is-link">
<div class="hero-body">
<p class="title">Medium hero</p>
<p class="subtitle">Medium subtitle</p>
</div>
</section>

Example

Large hero / Large subtitle

HTML

<section class="hero is-large is-info">
<div class="hero-body">
<p class="title">Large hero</p>
<p class="subtitle">Large subtitle</p>
</div>
</section>

Example

Half height hero / Half height subtitle

HTML

<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>
</div>
</div>
</section>

Example

Fullheight hero / Fullheight subtitle

HTML

<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>
</div>
</div>
</section>

내비게이션 바가 있는 전체 높이 (Fullheight with navbar)

고정 navbar를 사용한다면 히어로에 is-fullheight-with-navbar 수식어를 붙여서 뷰포트 높이에서 navbar 높이를 뺀 만큼 차지하게 할 수 있어요.

Example

Home / Documentation / Github / Download

HTML

<nav class="navbar">
<div class="container">
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
</div>

<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark">Github</a>
<a class="button is-link">Download</a>
</div>
</div>
</div>
</div>
</div>
</nav>

<section class="hero is-link is-fullheight-with-navbar">
<div class="hero-body">
<p class="title">Fullheight hero with navbar</p>
</div>
</section>

3부분으로 나뉜 전체 높이 히어로 (Fullheight hero in 3 parts)

뷰포트 전체 높이를 덮는 히어로를 만들려면 3개의 세로 부분으로 나눌 수 있어요.

• hero
• hero-head (항상 위쪽)
• hero-body (항상 세로 중앙)
• hero-foot (항상 아래쪽)

Example

Home / Examples / Documentation / Download / Title / Subtitle / Overview / Modifiers / Grid / Elements / Components / Layout

HTML

<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="https://bulma.io/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>
<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">
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</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>

Example

Home / Examples / Documentation / Download / Title / Subtitle / Overview / Modifiers / Grid / Elements / Components / Layout

HTML

<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="https://bulma.io/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>
<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>

Example

Home / Examples / Documentation / Download / Title / Subtitle / Overview / Modifiers / Grid / Elements / Components / Layout

HTML

<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="https://bulma.io/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>
<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">
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</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>

Sass 및 CSS 변수 (Sass and CSS variables)

Sass Variable	CSS Variable	Value
$hero-body-padding	var(--bulma-hero-body-padding)	3rem 1.5rem
$hero-body-padding-tablet	var(--bulma-hero-body-padding-tablet)	3rem 3rem
$hero-body-padding-small	var(--bulma-hero-body-padding-small)	1.5rem
$hero-body-padding-medium	var(--bulma-hero-body-padding-medium)	9rem 4.5rem
$hero-body-padding-large	var(--bulma-hero-body-padding-large)	18rem 6rem
$hero-gradient-h-offset	var(--bulma-hero-gradient-h-offset)	5deg
$hero-gradient-s-offset	var(--bulma-hero-gradient-s-offset)	10%
$hero-gradient-l-offset	var(--bulma-hero-gradient-l-offset:)	5%

더 알아보기 (Learn more)

• Container 문서
• Section 문서