Documentation

Documentation

Hero

Full-width page opener with four layouts and slots for content, form, asset, and features.

The <dsgn-hero> component renders the opening section of a page. It owns the section’s width and minimum height and arranges four named slots — content, form, asset, and features — according to the chosen layout. It composes <dsgn-container> and <dsgn-grid> internally, so it does not need to be wrapped in either.

Usage

<dsgn-hero layout="asset-right" min-height="md">
  <dsgn-heading-block slot="content">
    <dsgn-heading slot="heading" heading-size="hero" surface="dark"
      >Build better design systems</dsgn-heading
    >
    <dsgn-text slot="description" surface="dark"
      >Composable, governed, and ready to ship.</dsgn-text
    >
    <dsgn-button slot="action-primary" appearance="solid"
      >Get started</dsgn-button
    >
  </dsgn-heading-block>
  <dsgn-image
    slot="asset"
    src="/hero.png"
    alt="Product screenshot"
    aspect="video"
  ></dsgn-image>
</dsgn-hero>

Import the component module in your application entrypoint:

import '@ds-gn/ui/hero';

Props

Prop Type Default Description
layout 'asset-right' | 'asset-left' | 'asset-background' | 'centered' 'asset-right' Arrangement of content and asset.
min-height 'sm' | 'md' | 'lg' | 'full' 'md' Minimum height of the section. full fills the viewport.
content-align 'start' | 'center' 'start' Horizontal alignment of content, form, and features. Applies to layout="centered" only.
surface 'light' | 'dark' 'dark' Semantic token surface to use. Defaults to dark.

min-height and content-align are the attribute names; the matching JavaScript properties are minHeight and contentAlign. There is no variant or align prop.

Slots

Slot Description
content Primary hero content — typically an <dsgn-heading-block>.
form Form content rendered below the primary content, such as an <dsgn-form-block>.
asset Hero media or visual content.
features Supporting feature content below the main row, typically <dsgn-feature-item> elements.

There is no default slot, and no separate heading, description, or actions slots — compose those inside a <dsgn-heading-block> in the content slot.

Layouts

  • asset-right (default) and asset-left place content and form in the wide column of an 8-4 grid and asset in the narrow one. asset-left reverses the visual order at lg and up without changing DOM order.
  • asset-background stretches asset behind the section with an overlay, then layers content and form on top.
  • centered drops the asset column and stacks content, form, and features in a single column. This is the only layout content-align affects.

The consumer owns asset sizing — the hero does not constrain the slotted media’s dimensions in the side-by-side layouts.

Examples

Centered hero

<dsgn-hero layout="centered" content-align="center" min-height="lg">
  <dsgn-heading-block slot="content" alignment="center">
    <dsgn-heading slot="heading" heading-size="hero" surface="dark"
      >DS-GN</dsgn-heading
    >
    <dsgn-text slot="description" surface="dark"
      >Design system orchestration.</dsgn-text
    >
    <dsgn-button slot="action-primary" appearance="solid"
      >Get started</dsgn-button
    >
    <dsgn-button slot="action-secondary" appearance="outline"
      >Learn more</dsgn-button
    >
  </dsgn-heading-block>
</dsgn-hero>

Asset behind the content

<dsgn-hero layout="asset-background" min-height="full">
  <dsgn-image slot="asset" src="/backdrop.jpg" alt="" fit="cover"></dsgn-image>
  <dsgn-heading-block slot="content">
    <dsgn-heading slot="heading" heading-size="hero" surface="dark"
      >Ship faster</dsgn-heading
    >
  </dsgn-heading-block>
</dsgn-hero>

With a form and feature row

<dsgn-hero layout="asset-left">
  <dsgn-heading-block slot="content">
    <dsgn-heading slot="heading" heading-size="hero" surface="dark"
      >Join the beta</dsgn-heading
    >
  </dsgn-heading-block>
  <dsgn-form-block slot="form" surface="dark">
    <dsgn-input slot="input" type="email" name="email" label="Email"></dsgn-input>
    <dsgn-button slot="button" appearance="solid">Request access</dsgn-button>
  </dsgn-form-block>
  <dsgn-image slot="asset" src="/hero.png" alt="Product screenshot"></dsgn-image>
  <dsgn-feature-item slot="features" surface="dark" variant="success"
    >Free while in beta</dsgn-feature-item
  >
</dsgn-hero>

Usage patterns

  • The hero defaults to surface="dark". Set surface="dark" on the components you slot in as well — slotted content is themed by its own element.
  • Give a decorative background asset an empty alt, and a meaningful one a real description.
Esc