Getting started page

Beta
Help users take their first steps with the tool that helps them
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.
SourceStorybookFigma

A getting started page represents a space for people working with Appfire products to take their first steps in activing a tool or product that helps solve their problem or get their job done.

Fuegokit React features a set of crafted heroes, feature sections, and other common patterns you can configure and easily add to your Getting Started page.

Import

To start, make sure your app is wrapped in Fuegokit React's ThemeProvider.

import {ThemeProvider, BaseStyles} from '@fuegokit/react'

Add Fuegokit's BaseStyles component for a set of sensible default resets and to use Fuegokit's default theme object.

Constructing your page

Wrap your Getting Started page in a container. Fuegokit React provides a few ways to render these components easily without a lot of fuss.

One way is to use a <Stack>:

<Box sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
  <Stack size={7}>{/*all Getting Started page components in the stack will be separated by 56px of margin*/}</Stack>
  <FooterSection>{/*footer elements here, render footer outside of the Stack*/}</FooterSection>
</Box>

Using the Max Width Wrapper

None of Fuegokit React's components apply margin to themselves.

When rendering Getting Started page components, use the MaxWidthWrapper component to constrain the width of each element you need to in a responsive container.

Import the components you need:

import {MaxWidthWrapper, PageHero} from '@fuegokit/react'

Then ensure that each member of the stack is constrained as necessary:

Laying out the Getting Started page

By arranging items in the Getting Started page using a Stack component, you can ensure that the space between each element is consistent.

The Footer should remain absolutely positioned outside of the Stack:

To experiment with more full page examples and to see more implementation details with mock data, use the Getting Started page playground in Storybook, or refer to the example project repo's here.

See also