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

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.