Hero
Create pro-quality landing page with a beautiful hero section.
Usage
HeroSection, ScreenContainer, Hero, HeroBody, HeroTitle and HeroTeaser are primitives to build a hero.
Create awesome docs without compromise
A ready-to-use Gatsby theme to build docs for all your projects. Smooth DOC makes documentation easy.
import { Link } from 'gatsby'
import {
Button,
Hero,
HeroBody,
HeroSection,
HeroTitle,
HeroTeaser,
ScreenContainer,
} from 'smooth-doc/components'
import heroBackgroundURL from './images/hero-background.png'
render(
<HeroSection>
<ScreenContainer>
<Hero backgroundImageURL={heroBackgroundURL}>
<HeroBody>
<HeroTitle>Create awesome docs without compromise</HeroTitle>
<HeroTeaser>
A ready-to-use Gatsby theme to build docs for all your projects.
Smooth DOC makes documentation easy.
</HeroTeaser>
</HeroBody>
</Hero>
</ScreenContainer>
</HeroSection>,
)
Display actions
Use HeroActionList and HeroAction with Button to add actions.
Create awesome docs without compromise
A ready-to-use Gatsby theme to build docs for all your projects. Smooth DOC makes documentation easy.
import { Link } from 'gatsby'
import {
Button,
Hero,
HeroBody,
HeroSection,
HeroTitle,
HeroTeaser,
ScreenContainer,
HeroActionList,
HeroAction,
} from 'smooth-doc/components'
import heroBackgroundURL from './images/hero-background.png'
render(
<HeroSection>
<ScreenContainer>
<Hero backgroundImageURL={heroBackgroundURL}>
<HeroBody>
<HeroTitle>Create awesome docs without compromise</HeroTitle>
<HeroTeaser>
A ready-to-use Gatsby theme to build docs for all your projects.
Smooth DOC makes documentation easy.
</HeroTeaser>
<HeroActionList>
<HeroAction>
<Button as={Link} to="/docs/getting-started">
Getting Started
</Button>
</HeroAction>
<HeroAction>
<Button
variant="neutral"
as="a"
href="https://github.com/gregberge/smooth-doc"
>
Browse GitHub
</Button>
</HeroAction>
</HeroActionList>
</HeroBody>
</Hero>
</ScreenContainer>
</HeroSection>,
)
