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.

```tsx live
<RailTrack
  railLeft={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
  railRight={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
  spacing="medium"
>
  <Flex flexGrow={1} backgroundColor="neutralBold" borderRadius="small" />
</RailTrack>
```

## Rails

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.

```tsx live
<Flex flexDirection="column" gap="medium">
  <RailTrack
    railLeft={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
    spacing="medium"
  >
    <Flex flexGrow={1} backgroundColor="neutralBold" borderRadius="small" />
  </RailTrack>
  <RailTrack
    railRight={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
    spacing="medium"
  >
    <Flex flexGrow={1} backgroundColor="neutralBold" borderRadius="small" />
  </RailTrack>
  <RailTrack
    railLeft={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
    railRight={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
    spacing="medium"
  >
    <Flex flexGrow={1} backgroundColor="neutralBold" borderRadius="small" />
  </RailTrack>
</Flex>
```

## Spacing

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](/foundations/responsive-layouts/#responsive-prop-syntax).

```tsx live
// Example of spacing in a card layout
type Item = {
  label: string;
  value: 'none' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
};
const [selectedSpacing, setSelectedSpacing] = useState<Item | null>({ label: 'medium', value: 'medium' });

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <Box>
        <SelectDropdown
          label="Spacing"
          value={selectedSpacing}
          onChange={setSelectedSpacing}
          items={[
            { label: 'none', value: 'none' },
            { label: 'xxsmall', value: 'xxsmall' },
            { label: 'xsmall', value: 'xsmall' },
            { label: 'small', value: 'small' },
            { label: 'medium', value: 'medium' },
            { label: 'large', value: 'large' },
            { label: 'xlarge', value: 'xlarge' },
            { label: 'xxlarge', value: 'xxlarge' },
          ]}
        />
      </Box>
    </PlaygroundCard>

    <Flex borderRadius="medium" boxShadow="medium">
      <RailTrack
        spacing={selectedSpacing?.value ?? 'none'}
        alignItems="center"
        railLeft={
          <Box borderRadius="full" overflow="hidden" width={48} height={48}>
            <img src="https://ui-avatars.com/api/?name=Jane+Doe" alt="" role="presentation" width={48} height={48} />
          </Box>
        }
        railRight={<Button label="View details" tone="neutral" />}
      >
        <Flex flexDirection="column">
          <Text fontWeight="medium">Jane Doe</Text>
          <Text fontSize="xsmall" color="neutralSubtle">
            Assistant Manager
          </Text>
        </Flex>
      </RailTrack>
    </Flex>

    <Flex backgroundColor="criticalSubtle">
      <RailTrack
        spacing={selectedSpacing?.value ?? 'none'}
        alignItems="center"
        railLeft={
          <Box backgroundColor="neutral" width={48} height={48}>
            <Box borderRadius="full" overflow="hidden" width={48} height={48}>
              <img src="https://ui-avatars.com/api/?name=Jane+Doe" alt="" role="presentation" width={48} height={48} />
            </Box>
          </Box>
        }
        railRight={
          <Flex backgroundColor="neutral" height={48} alignItems="center">
            <Button label="View details" tone="neutral" />
          </Flex>
        }
      >
        <Flex flex={1} backgroundColor="neutral" height={48} alignItems="center">
          <Flex flexDirection="column">
            <Text fontWeight="medium">Jane Doe</Text>
            <Text fontSize="xsmall" color="neutralSubtle">
              Assistant Manager
            </Text>
          </Flex>
        </Flex>
      </RailTrack>
    </Flex>
  </Flex>
);
```

## Align items vertically

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`

```tsx live
<>
  <RailTrack
    spacing="medium"
    railLeft={<Flex flex={1} width={32} backgroundColor="themePrimary400" />}
    railRight={<Flex flex={1} width={64} backgroundColor="themePrimary400" />}
  >
    <Flex flex={1} height={64} backgroundColor="neutralBold" />
  </RailTrack>

  <RailTrack
    alignItems="start"
    spacing="medium"
    railLeft={<Flex width={32} height={32} backgroundColor="themePrimary400" />}
    railRight={<Flex width={64} height={24} backgroundColor="themePrimary400" />}
  >
    <Flex flex={1} height={64} backgroundColor="neutralBold" />
  </RailTrack>

  <RailTrack
    alignItems="center"
    spacing="medium"
    railLeft={<Flex width={32} height={32} backgroundColor="themePrimary400" />}
    railRight={<Flex width={64} height={24} backgroundColor="themePrimary400" />}
  >
    <Flex flex={1} height={64} backgroundColor="neutralBold" />
  </RailTrack>

  <RailTrack
    alignItems="end"
    spacing="medium"
    railLeft={<Flex width={32} height={32} backgroundColor="themePrimary400" />}
    railRight={<Flex width={64} height={24} backgroundColor="themePrimary400" />}
  >
    <Flex flex={1} height={64} backgroundColor="neutralBold" />
  </RailTrack>
</>
```

## Responsive

The `RailTrack` component supports the [responsive prop syntax](/foundations/responsive-layouts#responsive-prop-syntax) on most props. Try resizing your viewport to see the effects:

```tsx live
<RailTrack
  railLeft={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
  railRight={<Box width={48} height={48} backgroundColor="themePrimary400" borderRadius="small" />}
  spacing={{ small: 'xxsmall', medium: 'medium' }}
>
  <Flex flexGrow={1} backgroundColor="neutralBold" borderRadius="small" />
</RailTrack>
```

Layout elements with two available "rails" and a stretched center, like a railway track.

RailTrack

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources