Skip to main content

巨幕(Hero)

默认样式#

Hero Title

Not all heroes wear capes


<div class="hero shadow--lw">
<div class="container">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subtitle">Not all heroes wear capes</p>
<div>
<button class="button button--secondary button--outline button--lg">
Get Started
</button>
</div>
</div>
</div>

夜间模式#

Hero Title

Not all heroes wear capes


<div class="hero hero--dark">
<div class="container">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subtitle">Not all heroes wear capes</p>
<div>
<button class="button button--primary button--outline button--lg">
Get Started
</button>
</div>
</div>
</div>

Primary#

Contents are vertically-centered.

Hero Title

Not all heroes wear capes


<div class="hero hero--primary" style="height:25rem">
<div class="container">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subtitle">Not all heroes wear capes</p>
<div>
<button class="button button--secondary button--lg">Get Started</button>
</div>
</div>
</div>