Theme:
Hero
A full-width landing section. Center any content with dui-hero-content, and add dui-hero-overlay to darken a background image for legible text.
Basic
Build faster with DengaUI
Drop-in components, semantic classes, and themeable design tokens.
<div class="dui-hero" style="background: var(--dui-color-base-200)">
<div class="dui-hero-content">
<h1>Build faster with DengaUI</h1>
<button class="dui-btn dui-btn-primary">Get started</button>
</div>
</div>
With Overlay
Adventure awaits
Ship a polished landing page in minutes.
<div class="dui-hero" style="background-image: url('/banner.jpg')">
<div class="dui-hero-overlay"></div>
<div class="dui-hero-content" style="color: #fff">
<h1>Adventure awaits</h1>
<button class="dui-btn">Explore</button>
</div>
</div>