Hero

NOTE: Introduced feature in v0.2.0.

Hero is a multi-part surface pattern for displaying banner text with subtitling and actions, typically used for landing pages, error messages, and loading placeholders.

<script>
    import {Button, Hero} from "@kahi-ui/framework";
</script>

<Hero.Container palette="negative" height="100">
    <Hero.Header>404</Hero.Header>
    <Hero.Section>
        The page you tried to access is missing or no
        longer available.
    </Hero.Section>

    <Hero.Footer>
        <Button palette="light" variation="clear">
            Go Back
        </Button>
        <Button palette="accent">Submit Ticket</Button>
    </Hero.Footer>
</Hero.Container>

Imports

<script>
    import {Hero} from "@kahi-ui/framework";

    const {Container, Footer, Header, Section} = Hero;
</script>

Palette

You can change the color palette of the Hero via the palette property.

<script>
    import {
        Button,
        Hero,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container spacing="medium">
    <Hero.Container>
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>DEFAULT</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="accent">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>ACCENT</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="neutral">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>NEUTRAL</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="dark">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>DARK</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="light">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>LIGHT</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="affirmative">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>AFFIRMATIVE</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="informative">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>INFORMATIVE</Hero.Footer>
    </Hero.Container>

    <Hero.Container palette="negative">
        <Hero.Header>404</Hero.Header>
        <Hero.Section>
            The page you tried to access is missing or
            no longer available.
        </Hero.Section>

        <Hero.Footer>NEGATIVE</Hero.Footer>
    </Hero.Container>
</Stack.Container>