Track

A layout component which allows you to layout elements with 2 optional fixed "rails" and a fluid center (think railway track).

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Track } from '@adaptavant/eds-core';

Gap​

You can control the spacing between different parts of the Track using the Tailwind’s gap utilities.

const blueSquare = <div className="h-12 w-12 bg-accent" />;

const grayBox = <div className="h-12 bg-neutral-secondary" />;

const stackStyles = "w-full gap-4 items-stretch";

return (
  <Stack className={stackStyles}>
    {/* gap: 0px */}
    <Track className="gap-0" railStart={blueSquare} railEnd={blueSquare}>
      {grayBox}
    </Track>

    {/* gap: 16px */}
    <Track className="gap-4" railStart={blueSquare} railEnd={blueSquare}>
      {grayBox}
    </Track>
  </Stack>
);
View in Playroom

Vertical Alignment​

You can use the verticalAlign prop to align items to the "top", "middle" or "bottom".

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, modi eaque quis voluptates natus vitae. Rem delectus nam placeat? Perferendis, iusto! Numquam fuga velit magni? Perferendis nesciunt quos reiciendis itaque eligendi nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, modi eaque quis voluptates natus vitae. Rem delectus nam placeat? Perferendis, iusto! Numquam fuga velit magni? Perferendis nesciunt quos reiciendis itaque eligendi nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, modi eaque quis voluptates natus vitae. Rem delectus nam placeat? Perferendis, iusto! Numquam fuga velit magni? Perferendis nesciunt quos reiciendis itaque eligendi nisi.
<Stack className="gap-4">
  {/* verticalAlign="top" */}
  <Track verticalAlign="top" railStart={<BookingsIcon />}>
    <Text typography="text-body-16">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, modi
      eaque quis voluptates natus vitae. Rem delectus nam placeat?
      Perferendis, iusto! Numquam fuga velit magni? Perferendis nesciunt quos
      reiciendis itaque eligendi nisi.
    </Text>
  </Track>

  {/* verticalAlign="middle" */}
  <Track verticalAlign="middle" railStart={<BookingsIcon />}>
    <Text typography="text-body-16">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, modi
      eaque quis voluptates natus vitae. Rem delectus nam placeat?
      Perferendis, iusto! Numquam fuga velit magni? Perferendis nesciunt quos
      reiciendis itaque eligendi nisi.
    </Text>
  </Track>

  {/* verticalAlign="bottom" */}
  <Track verticalAlign="bottom" railStart={<BookingsIcon />}>
    <Text typography="text-body-16">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, modi
      eaque quis voluptates natus vitae. Rem delectus nam placeat?
      Perferendis, iusto! Numquam fuga velit magni? Perferendis nesciunt quos
      reiciendis itaque eligendi nisi.
    </Text>
  </Track>
</Stack>
View in Playroom

API Reference​

Track

PropDefaultDescription
as?'div'React.ElementType
The element type to render. Can be any valid HTML element (e.g., 'div', 'section', 'article', 'button') or a React component.
children?_React.ReactNode
The content to be rendered inside the Box.
className?''string
CSS class names to apply to the Box. Supports Tailwind CSS utility classes.
style?{}React.CSSProperties
Inline styles to apply to the Box.

verticalAlign?

middle

bottom | middle | top

Determines how the rails and center are vertically aligned to each other. A typography or heading can be provided to center align icons and with text that may wrap.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.