Hero

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Hero

Documentation for the Hero component.

Installation

bash

deno run -A jsr:@lockness/ui add hero

Usage

tsx

import {
  Hero,
  HeroTitle,
  HeroSubtitle,
  HeroActions,
  HeroCTA
} from '@lockness/ui/components'

<Hero background="gradient" size="lg">
  <HeroTitle>Build Something Amazing</HeroTitle>
  <HeroSubtitle>
    Start your next project with our powerful UI components.
  </HeroSubtitle>
  <HeroActions>
    <HeroCTA href="/get-started">Get Started</HeroCTA>
  </HeroActions>
</Hero>

Props

Hero

Prop	Type	Default	Description
background	`'none' \| 'pattern' \| 'gradient' \| 'dots' \| 'grid'`	`'none'`	Background style
align	`'center' \| 'left'`	`'center'`	Content alignment
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'lg'`	Vertical padding size
maxWidth	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'default' \| 'full'`	`'default'`	Container max width
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

HeroAnnouncement

Prop	Type	Default	Description
href	`string`	-	Link URL
badge	`string`	-	Badge text (shown in pill)
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

HeroTitle

Prop	Type	Default	Description
size	`'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	Title size
gradient	`string`	-	Gradient text (wrap part of title in this)
gradientColors	`'primary' \| 'blue-violet' \| 'green-teal' \| 'orange-red' \| 'custom'`	`'primary'`	Gradient colors
gradientClass	`string`	-	Custom gradient class (when gradientColors is 'custom')
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

HeroSubtitle

Prop	Type	Default	Description
maxWidth	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Max width
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

HeroActions

Prop	Type	Default	Description
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

HeroCTA

Prop	Type	Default	Description
href	`string`	-	Link URL
variant	`'gradient' \| 'primary' \| 'secondary' \| 'outline'`	`'gradient'`	Button variant
size	`'sm' \| 'default' \| 'lg'`	`'default'`	Button size
showArrow	`boolean`	`true`	Show arrow icon
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

HeroCommand

Prop	Type	Default	Description
command	`string`	required	Command text to display and copy
class	`string`	-	Additional CSS class names

HeroFooter

Prop	Type	Default	Description
class	`string`	-	Additional CSS class names
children	`unknown`	-	Children content

Theming

The Hero component can be customized using CSS variables. This allows you to change the appearance of hero sections globally or override specific instances.

Available CSS Variables

Variable	Default	Description
`--hero-padding-y`	`4rem`	Vertical padding
`--hero-padding-x`	`1.5rem`	Horizontal padding
`--hero-title-font-size`	`3rem`	Title font size (base)
`--hero-title-font-size-md`	`4rem`	Title font size (medium screens)
`--hero-title-font-size-lg`	`5rem`	Title font size (large screens)
`--hero-subtitle-font-size`	`1.25rem`	Subtitle font size (base)
`--hero-subtitle-font-size-md`	`1.5rem`	Subtitle font size (medium screens)
`--hero-gap`	`1.5rem`	Gap between hero elements

Theming Examples

Global Customization

Customize all hero sections by setting CSS variables in your theme:

css

/* app/view/assets/app.css */
@theme {
    /* Increase padding for more spacious heroes */
    --hero-padding-y: 6rem;
    --hero-padding-x: 2rem;

    /* Larger title sizes */
    --hero-title-font-size: 3.5rem;
    --hero-title-font-size-md: 4.5rem;
    --hero-title-font-size-lg: 6rem;

    /* Adjust subtitle size */
    --hero-subtitle-font-size: 1.5rem;
    --hero-subtitle-font-size-md: 1.75rem;

    /* More spacing between elements */
    --hero-gap: 2rem;
}

Local Overrides

Override CSS variables for specific hero instances:

tsx

<div style="--hero-padding-y: 2rem; --hero-title-font-size: 2rem;">
    <Hero>
        {/* Compact hero with smaller text */}
        <HeroTitle>Welcome</HeroTitle>
    </Hero>
</div>

<div style="--hero-title-font-size-lg: 7rem; --hero-gap: 3rem;">
    <Hero size="xl">
        {/* Extra large hero with massive title */}
        <HeroTitle>Big Announcement</HeroTitle>
    </Hero>
</div>

Component-Specific Theming

Create themed sections with different hero styles:

tsx

<div class="landing-hero" style={{
    '--hero-padding-y': '8rem',
    '--hero-title-font-size': '4rem',
    '--hero-title-font-size-lg': '6rem',
    '--hero-gap': '2.5rem'
}}>
    <Hero background="gradient" size="xl">
        {/* Large, spacious landing page hero */}
        <HeroTitle>Build Amazing Things</HeroTitle>
        <HeroSubtitle>Start building today</HeroSubtitle>
    </Hero>
</div>

<div class="compact-hero" style={{
    '--hero-padding-y': '2rem',
    '--hero-padding-x': '1rem',
    '--hero-title-font-size': '2rem',
    '--hero-subtitle-font-size': '1rem',
    '--hero-gap': '1rem'
}}>
    <Hero size="sm">
        {/* Compact hero for internal pages */}
        <HeroTitle>Dashboard</HeroTitle>
        <HeroSubtitle>Manage your account</HeroSubtitle>
    </Hero>
</div>

COMPLETE EXAMPLE

PRO release - Join the waitlistNew

Let's Build Together

Lockness UI is an open-source set of prebuilt UI components, ready-to-use examples based on the utility-first Tailwind CSS framework.

Get started

Runtime:Deno

Installation Guide

tsx

import {
  Hero,
  HeroAnnouncement,
  HeroTitle,
  HeroSubtitle,
  HeroActions,
  HeroCTA,
  HeroCommand,
  HeroFooter,
  HeroBadge,
  HeroSeparator,
  HeroLink,
} from '@lockness/ui/components'

<Hero background="pattern" size="lg">
  <HeroAnnouncement href="#" badge="New">
    PRO release - Join the waitlist
  </HeroAnnouncement>
  <HeroTitle gradient="Together" gradientColors="blue-violet">
    Let's Build
  </HeroTitle>
  <HeroSubtitle>
    Your description here...
  </HeroSubtitle>
  <HeroActions>
    <HeroCTA href="#">Get started</HeroCTA>
    <HeroCommand command="deno add @lockness/ui" />
  </HeroActions>
  <HeroFooter>
    <HeroBadge label="Runtime">Deno</HeroBadge>
    <HeroSeparator />
    <HeroLink href="#">Installation Guide</HeroLink>
  </HeroFooter>
</Hero>

BACKGROUND VARIANTS

None (Default)

Clean Background

No background decoration.

Gradient

Gradient Background

Subtle gradient from primary color.

Dots

Dots Pattern

Subtle dot grid background.

Grid

Grid Pattern

Grid lines background.

tsx

<Hero background="none">...</Hero>
<Hero background="gradient">...</Hero>
<Hero background="dots">...</Hero>
<Hero background="grid">...</Hero>
<Hero background="pattern">...</Hero>

TITLE GRADIENTS

Gradient Primary

Blue to Violet

Green to Teal

Orange to Red

tsx

<HeroTitle gradient="Primary" gradientColors="primary">
  Gradient
</HeroTitle>

<HeroTitle gradient="Violet" gradientColors="blue-violet">
  Blue to
</HeroTitle>

<HeroTitle gradient="Teal" gradientColors="green-teal">
  Green to
</HeroTitle>

<HeroTitle gradient="Red" gradientColors="orange-red">
  Orange to
</HeroTitle>

TITLE SIZES

Small Title

Default Title

Large Title

Extra Large

tsx

<HeroTitle size="sm">Small Title</HeroTitle>
<HeroTitle size="default">Default Title</HeroTitle>
<HeroTitle size="lg">Large Title</HeroTitle>
<HeroTitle size="xl">Extra Large</HeroTitle>

ANNOUNCEMENT BANNER

Check out our latest featuresNew

Version 2.0 is here🎉

Simple announcement without link

tsx

<HeroAnnouncement href="#" badge="New">
  Check out our latest features
</HeroAnnouncement>

<HeroAnnouncement href="#" badge="🎉">
  Version 2.0 is here
</HeroAnnouncement>

<HeroAnnouncement>
  Simple announcement without link
</HeroAnnouncement>

CTA BUTTON VARIANTS

Gradient Primary Secondary Outline

tsx

<HeroCTA variant="gradient" href="#">Gradient</HeroCTA>
<HeroCTA variant="primary" href="#">Primary</HeroCTA>
<HeroCTA variant="secondary" href="#">Secondary</HeroCTA>
<HeroCTA variant="outline" href="#">Outline</HeroCTA>
<HeroCTA variant="primary" showArrow={false}>No Arrow</HeroCTA>

CTA SIZES

Small Default Large

tsx

<HeroCTA size="sm" href="#">Small</HeroCTA>
<HeroCTA size="default" href="#">Default</HeroCTA>
<HeroCTA size="lg" href="#">Large</HeroCTA>

COMMAND BUTTON

tsx

<HeroCommand command="npm install @lockness/ui" />
<HeroCommand command="deno add @lockness/ui" />
<HeroCommand command="pnpm add @lockness/ui" />

HERO FOOTER

Framework:Deno

License:MIT

Documentation

tsx

<HeroFooter>
  <HeroBadge label="Framework">Deno</HeroBadge>
  <HeroSeparator />
  <HeroBadge label="License">MIT</HeroBadge>
  <HeroSeparator />
  <HeroLink href="#">Documentation</HeroLink>
</HeroFooter>

HERO SIZES

tsx

<Hero size="sm">...</Hero>   {/* py-12 md:py-16 */}
<Hero size="md">...</Hero>   {/* py-16 md:py-24 */}
<Hero size="lg">...</Hero>   {/* py-24 md:py-32 - default */}
<Hero size="xl">...</Hero>   {/* py-32 md:py-48 */}

SIMPLE EXAMPLE

Welcome to Lockness

Build fast, modern web applications with Deno.

Get Started Learn More

tsx

<Hero background="gradient" size="md">
  <HeroTitle>Welcome to Lockness</HeroTitle>
  <HeroSubtitle>
    Build fast, modern web applications with Deno.
  </HeroSubtitle>
  <HeroActions>
    <HeroCTA variant="primary" href="#">Get Started</HeroCTA>
    <HeroCTA variant="outline" href="#">Learn More</HeroCTA>
  </HeroActions>
</Hero>

WITH IMAGE

Ship faster with components

Pre-built, accessible components that help you build beautiful UIs in record time.

Browse Components

tsx

<Hero background="dots" size="md">
  <HeroTitle size="lg">Ship faster with components</HeroTitle>
  <HeroSubtitle maxWidth="lg">
    Pre-built, accessible components...
  </HeroSubtitle>
  <HeroActions>
    <HeroCTA href="#">Browse Components</HeroCTA>
  </HeroActions>
  <HeroImage
    src="/images/dashboard.png"
    alt="Dashboard preview"
    position="bottom"
  />
</Hero>

Edit this page