Hero

Default

<Hero> <Container> <Hero.Title>Hero Title</Hero.Title> <Hero.Subtitle>Not all heroes wear capes</Hero.Subtitle> <Button outline size="large">Get Started</Button> </Container> </Hero>

<Hero>
  <Container>
    <Hero.Title>Hero Title</Hero.Title>
    <Hero.Subtitle>Not all heroes wear capes</Hero.Subtitle>

    <Button outline size="large">Get Started</Button>
  </Container>
</Hero>

Dark

<Hero theme="dark"> <Container> <Hero.Title>Hero Title</Hero.Title> <Hero.Subtitle>Not all heroes wear capes</Hero.Subtitle> <Button outline theme="primary" size="large">Get Started</Button> </Container> </Hero>

<Hero theme="dark">
  <Container>
    <Hero.Title>Hero Title</Hero.Title>
    <Hero.Subtitle>Not all heroes wear capes</Hero.Subtitle>

    <Button outline theme="primary" size="large">Get Started</Button>
  </Container>
</Hero>

Primary

<Hero theme="primary"> <Container> <Hero.Title>Hero Title</Hero.Title> <Hero.Subtitle>Not all heroes wear capes</Hero.Subtitle> <Button size="large">Get Started</Button> </Container> </Hero>

<Hero theme="primary">
  <Container>
    <Hero.Title>Hero Title</Hero.Title>
    <Hero.Subtitle>Not all heroes wear capes</Hero.Subtitle>

    <Button size="large">Get Started</Button>
  </Container>
</Hero>