Row

Rows are wrappers for columns.

Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also create a basic flex container that will uniformly apply column sizing.

Simple Row

Rows are easy to use and they don't have any variations.

<Row>{/* Your content and columns */}</Row>

API

Learn more about the properties and the customization points.

Usage

import Row from "@sonnat/ui/Row";


//or
import { Row } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Row Properties
NameTypeDefaultDescription
childrennode-The content of the row.
classNamestring-Append to the class names applied to the component so you can override or extend the styles.
  • The ref is forwarded to the root element.
  • Any other properties supplied will be provided to the root element.