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.
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.
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><Buttonvariant="neutral"as="a"href="https://github.com/gregberge/smooth-doc">Browse GitHub</Button></HeroAction></HeroActionList></HeroBody></Hero></ScreenContainer></HeroSection>,)