## Feature Examples

### Structure
- description: Pass the data as `items` and render each one with the `children` function, which receives the item, its index and the number of items in its row. Wrap every item in `<AnalyticsLayout.Cell/>` so it gets the dividers and the hover highlight. Rows are filled up to the maximum number of items per row, so the last row may be shorter than the others.
- example:
```jsx
() => {
  const metrics = [
    { title: 'Site sessions', value: '8,912' },
    { title: 'Unique visitors', value: '6,204' },
    { title: 'Page views', value: '24,760' },
    { title: 'Bounce rate', value: '42%' },
    { title: 'Avg. session duration', value: '2m 14s' },
  ];

  return (
    <AnalyticsLayout items={metrics}>
      {(metric) => (
        <AnalyticsLayout.Cell key={metric.title}>
          <Box direction="vertical" padding="SP4" gap="SP1">
            <Text size="small" secondary>
              {metric.title}
            </Text>
            <Heading size="medium">{metric.value}</Heading>
          </Box>
        </AnalyticsLayout.Cell>
      )}
    </AnalyticsLayout>
  );
};
```

### Minimum width
- description: The layout stretches to the width of its container but never gets narrower than 636px. Place it in a container that is at least that wide, for example a full-width card. This example renders it at the minimum width.
- example:
```jsx
() => {
  const metrics = [
    { title: 'Bookings', value: '146' },
    { title: 'Cancellations', value: '9' },
    { title: 'Revenue', value: '$5,840' },
    { title: 'New clients', value: '37' },
  ];

  return (
    <Box width="636px">
      <AnalyticsLayout items={metrics}>
        {(metric) => (
          <AnalyticsLayout.Cell key={metric.title}>
            <Box direction="vertical" padding="SP4" gap="SP1">
              <Text size="small" secondary>
                {metric.title}
              </Text>
              <Heading size="medium">{metric.value}</Heading>
            </Box>
          </AnalyticsLayout.Cell>
        )}
      </AnalyticsLayout>
    </Box>
  );
};
```

### Items per row
- description: Control how many items a row holds with `minItemsPerRow` (default 2) and `maxItemsPerRow` (default 3). Rows are filled up to the maximum. When the leftover items would form a row shorter than the minimum, the last rows are re-split into rows of the minimum size instead. The third argument of the `children` function tells each cell how many items share its row.
- example:
```jsx
() => {
  const metrics = [
    { title: 'Sessions', value: '12,480' },
    { title: 'Orders', value: '384' },
    { title: 'Revenue', value: '$28,760' },
    { title: 'Conversion rate', value: '3.1%' },
    { title: 'Avg. order value', value: '$74.90' },
    { title: 'New customers', value: '212' },
    { title: 'Returning customers', value: '98' },
    { title: 'Refunds', value: '$1,120' },
  ];

  const renderCell = (metric, index, rowItemsCount) => (
    <AnalyticsLayout.Cell key={metric.title}>
      <Box direction="vertical" padding="SP4" gap="SP1">
        <Text size="small" secondary>
          {metric.title}
        </Text>
        <Heading size="medium">{metric.value}</Heading>
        <Text size="tiny" secondary>
          Cell {index + 1} of {rowItemsCount}
        </Text>
      </Box>
    </AnalyticsLayout.Cell>
  );

  return (
    <StorybookComponents.Stack flexDirection="column">
      <AnalyticsLayout items={metrics}>{renderCell}</AnalyticsLayout>
      <AnalyticsLayout items={metrics} maxItemsPerRow={4}>
        {renderCell}
      </AnalyticsLayout>
    </StorybookComponents.Stack>
  );
};
```

### Divider
- description: Dividers are shown by default. Hide the horizontal lines between rows with `showDivider={false}` on the layout, and the vertical lines between cells with the same prop on `<AnalyticsLayout.Cell/>`. Without dividers, rows and cells are separated by spacing instead.
- example:
```jsx
() => {
  const metrics = [
    { title: 'Sessions', value: '12,480' },
    { title: 'Orders', value: '384' },
    { title: 'Revenue', value: '$28,760' },
    { title: 'Conversion rate', value: '3.1%' },
    { title: 'Avg. order value', value: '$74.90' },
    { title: 'New customers', value: '212' },
  ];

  const renderContent = (metric) => (
    <Box direction="vertical" padding="SP4" gap="SP1">
      <Text size="small" secondary>
        {metric.title}
      </Text>
      <Heading size="medium">{metric.value}</Heading>
    </Box>
  );

  return (
    <StorybookComponents.Stack flexDirection="column">
      <AnalyticsLayout items={metrics}>
        {(metric) => (
          <AnalyticsLayout.Cell key={metric.title}>
            {renderContent(metric)}
          </AnalyticsLayout.Cell>
        )}
      </AnalyticsLayout>
      <AnalyticsLayout items={metrics} showDivider={false}>
        {(metric) => (
          <AnalyticsLayout.Cell key={metric.title} showDivider={false}>
            {renderContent(metric)}
          </AnalyticsLayout.Cell>
        )}
      </AnalyticsLayout>
    </StorybookComponents.Stack>
  );
};
```

### Highlight
- description: Hovering a cell highlights it by extending its dividers to the full height of the row. Turn this off with `disableHighlight` on `<AnalyticsLayout.Cell/>`, for example when the cells are not interactive. The highlight is drawn on the cell dividers, so it has no effect when they are hidden.
- example:
```jsx
() => {
  const metrics = [
    { title: 'Sessions', value: '12,480' },
    { title: 'Orders', value: '384' },
    { title: 'Revenue', value: '$28,760' },
    { title: 'Conversion rate', value: '3.1%' },
    { title: 'Avg. order value', value: '$74.90' },
    { title: 'New customers', value: '212' },
  ];

  const renderContent = (metric) => (
    <Box direction="vertical" padding="SP4" gap="SP1">
      <Text size="small" secondary>
        {metric.title}
      </Text>
      <Heading size="medium">{metric.value}</Heading>
    </Box>
  );

  return (
    <StorybookComponents.Stack flexDirection="column">
      <AnalyticsLayout items={metrics}>
        {(metric) => (
          <AnalyticsLayout.Cell key={metric.title}>
            {renderContent(metric)}
          </AnalyticsLayout.Cell>
        )}
      </AnalyticsLayout>
      <AnalyticsLayout items={metrics}>
        {(metric) => (
          <AnalyticsLayout.Cell key={metric.title} disableHighlight>
            {renderContent(metric)}
          </AnalyticsLayout.Cell>
        )}
      </AnalyticsLayout>
    </StorybookComponents.Stack>
  );
};
```

## Common Use Case Examples

### Analytics summary
- description: Group several `<AnalyticsSummaryCard/>` items in a card to give an overview of key metrics. The layout keeps the rows evenly filled as the number of metrics changes.
- example:
```jsx
() => {
  const days = [
    '2026-09-01',
    '2026-09-02',
    '2026-09-03',
    '2026-09-04',
    '2026-09-05',
    '2026-09-06',
    '2026-09-07',
  ];
  const toChartData = (values) =>
    values.map((value, index) => ({ label: new Date(days[index]), value }));

  const metrics = [
    {
      title: 'Total sales',
      value: '$9,430',
      trend: 12,
      color: '#3899EC',
      values: [620, 840, 910, 1020, 1380, 1560, 1900],
    },
    {
      title: 'Sessions',
      value: '1,943',
      trend: 8,
      color: '#FC8E53',
      values: [210, 260, 240, 300, 290, 320, 323],
    },
    {
      title: 'Orders',
      value: '128',
      trend: -5,
      color: '#46C6C3',
      values: [22, 19, 18, 20, 17, 16, 16],
    },
    {
      title: 'Active leads',
      value: '35',
      trend: -15,
      color: '#8E56FF',
      values: [8, 7, 6, 5, 4, 3, 2],
    },
    {
      title: 'New contacts',
      value: '64',
      trend: 21,
      color: '#3899EC',
      values: [5, 7, 9, 8, 12, 11, 12],
    },
  ];

  return (
    <Card>
      <Card.Header title="Overview" subtitle="Last 7 days" />
      <Card.Divider />
      <Card.Content>
        <AnalyticsLayout items={metrics}>
          {(metric) => (
            <AnalyticsLayout.Cell key={metric.title}>
              <AnalyticsSummaryCard
                title={metric.title}
                value={metric.value}
                trend={metric.trend}
                isTrendVisible
                chartData={toChartData(metric.values)}
                chartColorHex={metric.color}
                chartWidth={120}
              />
            </AnalyticsLayout.Cell>
          )}
        </AnalyticsLayout>
      </Card.Content>
    </Card>
  );
};
```