# Line

```ts
import { Line } from 'cx/svg';
```



The `Line` component is a CxJS version of the SVG `line` element designed for responsive layouts. The line is always rendered from the **top-left corner** to the **bottom-right corner** of its bounding box.

In CxJS, `Line` is a container element and allows other objects to be rendered within its boundaries, such as `Text`.

```tsx
import { Svg, Line, Text } from "cx/svg";

export default (
  <Svg style="height: 200px; border: 1px dashed #ddd">
    <Line stroke="steelblue" style="stroke-width: 2">
      <Text dy="0.4em" textAnchor="middle">
        Diagonal Line
      </Text>
    </Line>
  </Svg>
);

```

## Positioning

Use `anchors` to control where the line appears:

- `anchors="0 1 1 0"` — diagonal from top-left to bottom-right (default, full container)
- `anchors="0.5 1 0.5 0"` — horizontal line at vertical center
- `anchors="0 0.5 1 0.5"` — vertical line at horizontal center

## Configuration

| Property     | Type            | Description                                                                       |
| ------------ | --------------- | --------------------------------------------------------------------------------- |
| `anchors`    | `string/number` | Position within parent bounds. Format: `"t r b l"`. See [Svg](./svg) for details. |
| `offset`     | `string/number` | Translate edges in pixels. Format: `"t r b l"`. See [Svg](./svg) for details.     |
| `margin`     | `string/number` | CSS-like margin. See [Svg](./svg) for details.                                    |
| `stroke`     | `string`        | Stroke color for the line.                                                        |
| `colorIndex` | `number`        | Index in the default color palette.                                               |