# Marker: Long content

> Notes wrap and unbroken strings break instead of widening the layout. Separator lines keep a minimum length on both sides.

Example: https://hextaui.com/docs/marker/examples/long-content
Component docs: https://hextaui.com/docs/marker.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/marker-long-content.json
```

This adds `components/examples/marker/long-content.tsx` with the Marker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/marker/long-content.tsx"
import { IconAlertTriangle } from "@tabler/icons-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

export function MarkerLongContent() {
  return (
    <div className="flex w-72 max-w-full flex-col gap-6">
      <Marker>
        <MarkerIcon>
          <IconAlertTriangle className="text-warning" />
        </MarkerIcon>
        <MarkerContent>
          Messages older than 90 days were archived to
          archive-2026-workspace-wide-retention-policy@example.com
        </MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>
          A separator label that is long enough to wrap onto two lines
        </MarkerContent>
      </Marker>
    </div>
  )
}
```

## Props in this example

### Marker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "separator" \| "border"` | `"default"` |  |

## More Marker examples

- [Variants](https://hextaui.com/docs/marker/examples/variants.md)
- [Sticky dates](https://hextaui.com/docs/marker/examples/sticky.md)
- [Relative dates](https://hextaui.com/docs/marker/examples/time.md)
- [Activity](https://hextaui.com/docs/marker/examples/events.md)
- [Right to left](https://hextaui.com/docs/marker/examples/rtl.md)