Grid

A Grid displays content in a grid.

Example

Preview

Grid Header

1

2

3

4

5

6

7

8

9

10

11

12

Code

import React from 'react';
import { Grid, GridHeaderText, GridContent, GridBackground } from '@hv/ui/grid';

export default function GridExample({
  content,
  headerText,
  headerTextPosition,
  paddingTop,
  paddingBottom,
  fullBleed = true,
  backgroundColor,
  ...rest
}) {
  return (
    <Grid {...{ fullBleed }}>
      <GridBackground {...{ backgroundColor, paddingTop, paddingBottom }}>
        <GridHeaderText position={headerTextPosition} {...headerText} />
        <GridContent {...rest}>
          {content.map((gi, i) => (
            <React.Fragment key={i}>{gi}</React.Fragment>
          ))}
        </GridContent>
      </GridBackground>
    </Grid>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
sm	Number of columns in small screens	1 2
md	Number of columns in medium screens	1 2 3
lg	Number of columns in large screens	1 2 3 4 5 6
gap	Space between the columns and rows	none small medium large extra large
fullBleed	Width of the grid is flush left and right or has side padding	true false
paddingTop	Option to control spacing above the grid	regular extra
paddingBottom	Option to control spacing below the grid	regular extra
headerText	Optional text above the carousel	String
headerTextPosition	Text alignment of grid header	left right center
backgroundColor	Color of the grid background	primary secondary accent background destructive muted

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides.

Class overrides can be passed in to any grid component to get the layout and style you need.

<Grid className='pt-12'>
  <GridHeaderText
    position={headerTextPosition}
    {...headerText}
    className='py-8 text-2xl'
  />
  <GridContent className='bg-accent'>{...content}</GridContent>
</Grid>