RailTrack

The <RailTrack /> component allows you to layout elements with two optional fixed "rails" and a fluid center, with a set amount of spacing between and around the track elements.

Show codeCopy code

There are two rail slots of the rail track, railLeft and railRight. Opt in to use one or both of them to achieve the desired layout.

Show codeCopy code

Use the spacing prop to control the white space and around the track elements. If you need more control of the spacing, consider composing your component using <Flex /> or <Box /> instead.

It also supports the responsive prop syntax.

Show codeCopy code

Use the alignItems prop to control the vertical alignment of the track elements. By default it's set to stretch. Optionally set it to:

• start
• center
• end

Show codeCopy code

The RailTrack component supports the responsive prop syntax on most props. Try resizing your viewport to see the effects:

Show codeCopy code