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 } from '@hv/ui/grid';

export default function GridExample({
  content,
  id,
  headerText,
  headerTextPosition,
  paddingTop,
  paddingBottom,
  fullBleed = true,
  gap = 'Small',
  ...variants
}) {
  const componentPaddingTop = paddingTop === 'extra' ? 'pt-10' : '';
  const componentPaddingBottom = paddingBottom === 'extra' ? 'pb-10' : '';

  return (
    <Grid className={`${componentPaddingBottom} ${componentPaddingTop}`}>
      <GridHeaderText position={headerTextPosition}>
        {headerText}
      </GridHeaderText>
      <GridContent gap={gap} {...variants}>
        {content.map((gi, i) => (
          <React.Fragment key={i}>{gi}</React.Fragment>
        ))}
      </GridContent>
    </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
headerTextPosition	Text alignment of grid header	Left Right Center

Customization

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 of in the ui library package directly.
• Otherwise, pass className overrides (the <Grid> and <GridContent> componennts can accept className overrides).

Say you wanted to make the header text larger in one particular instance:

<Grid className='pt-12'>
  <GridHeaderText position={headerTextPosition}>{headerText}</GridHeaderText>
  <GridContent>{...content}</GridContent>
</Grid>