# Track (/components/layout/track)
`Track` aligns content on the inline axis. Use it when icons, avatars, controls, or other supporting
content need to stay aligned with content that can grow or wrap. Read [Layout](/docs/layout) to
choose a layout component.
Pass content to `railStart` or `railEnd` to place it before or after `children`. Rails keep their
size. `children` uses the remaining inline space and can shrink when space is limited.
apps/docs/src/examples/track/basic.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Track } from '@luke-ui/react/track';
export default () => {
return (
}>
Example message that wraps onto multiple lines when the available space is limited.
);
};
```
## Rails and sizing [#rails-and-sizing]
When space is limited, `children` can shrink below its intrinsic size instead of forcing Track
wider. This avoids common layout blowouts with long or truncating content.
Track does not apply wrapping or truncation itself. Content can still overflow when it has no way to
wrap or otherwise constrain itself.
## Alignment [#alignment]
Use `center` when the rail should align with the whole content block. When the content wraps, the
rail is centred against the resulting block.
Use `firstLine` when the rail should stay aligned with the first line as the content wraps. This is
useful for icons, avatars, and controls beside text. Use `start` or `end` when the rail should align
with the start or end of the content block. `start` is the default.
`firstLine` works best when Track and its content inherit the same line height. A child with a
different line height, such as a `Heading` or differently sized `Text`, does not change the rail's
alignment point.
apps/docs/src/examples/track/alignment.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Icon } from '@luke-ui/react/icon';
import { Track } from '@luke-ui/react/track';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
}>
Example message that wraps onto multiple lines when the available space is limited.
}>
Example message that wraps onto multiple lines when the available space is limited.
);
};
```
## Avatar and text [#avatar-and-text]
apps/docs/src/examples/track/avatar.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';
import { Track } from '@luke-ui/react/track';
export default () => {
return (
}
>
Boricio Jones
Product designer
);
};
```
## Choose the rendered element [#choose-the-rendered-element]
Set `elementType="li"` when Track is a direct child of `ul` or `ol`.
apps/docs/src/examples/track/element.tsx
```tsx
import { Icon } from '@luke-ui/react/icon';
import { Track } from '@luke-ui/react/track';
export default () => {
return (
}>
First item
}>
Second item
);
};
```
Set `elementType="span"` when Track needs to flow inside phrasing content. Its rails and `children`
must also be valid phrasing content.
apps/docs/src/examples/track/element-span.tsx
```tsx
import { Icon } from '@luke-ui/react/icon';
import { Track } from '@luke-ui/react/track';
export default () => {
return (
Example text with{' '}
}>
inline content
{' '}
in the middle.
);
};
```
## API [#api]