Layout

When building UIs you should always strive for responsive layouts to enable your pages to adapt to different screen sizes and orientations, ensuring overall consistency across platforms and environments.

While responsive design is a best practice, not all applications need to support every viewport size. Consider your users and use cases—target the screen sizes that make sense for your specific product or context.

Breakpoints

All layout components in the UI Kit rely on breakpoints—specific screen widths where the layout adjusts to better fit the available space and maintain usability across different devices. When the screen width crosses a breakpoint, the layout automatically adapts to ensure content remains accessible and well-structured.

Breakpoint	Width (px)	Gutters (px)	Columns
`xs`	0	16	4
`sm`	600	16	8
`md`	960	32	12
`lg`	1270	32	12
`xl`	1920	32	12

Layout Components

The UI Kit provides a set of components to help you create responsive layouts. The Container and Grid components use the predefined breakpoints. In contrast, SimpleGrid gives you the flexibility to define custom breakpoints based on your layout needs.

Container

The HvContainer is one of the most basic layout components we provide to our community, and it enables you to center content horizontally on the page.

This component is ideal when your content should stay within a specific width. Use the maxWidth prop to define the breakpoint that sets this limit. The layout will automatically adjust to the screen size but will never grow beyond the specified maximum width.

Details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti quasi sed perferendis optio eos excepturi possimus atque aperiam impedit expedita dolores, est nulla, aut iure, deleniti recusandae corporis eaque provident?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit culpa error vitae fugit minima. Distinctio tempore ipsa voluptatum, vel alias possimus aut, itaque corrupti nesciunt accusantium commodi nulla minima voluptates.

<HvContainer maxWidth="sm">
  <HvGlobalActions title="Details" />


  <HvTypography variant="body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti quasi sed
    perferendis optio eos excepturi possimus atque aperiam impedit expedita
    dolores, est nulla, aut iure, deleniti recusandae corporis eaque provident?
  </HvTypography>
  <HvTypography variant="body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit culpa error
    vitae fugit minima. Distinctio tempore ipsa voluptatum, vel alias possimus
    aut, itaque corrupti nesciunt accusantium commodi nulla minima voluptates.
  </HvTypography>
</HvContainer>

<HvContainer maxWidth="sm">
  <HvGlobalActions title="Details" />

  <HvTypography variant="body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti quasi sed
    perferendis optio eos excepturi possimus atque aperiam impedit expedita
    dolores, est nulla, aut iure, deleniti recusandae corporis eaque provident?
  </HvTypography>
  <HvTypography variant="body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit culpa error
    vitae fugit minima. Distinctio tempore ipsa voluptatum, vel alias possimus
    aut, itaque corrupti nesciunt accusantium commodi nulla minima voluptates.
  </HvTypography>
</HvContainer>

Grid

The HvGrid component lets you build responsive grid layouts with a customizable number of columns. Grid items automatically adapt to different screen sizes.

By default, the grid uses a 12-column layout. You can customize this using the columns prop—set it to a specific number for a fixed column count, or use auto to apply responsive behavior based on the default breakpoints. Grid items can also span across multiple columns, allowing you to build flexible and adaptive layouts to fit your design needs.

Dashboard

KPI 1

50 KPI 2

67 KPI 3

75 KPI 4

80

<HvGrid columns="auto" container>
  <HvGrid item xs={4} sm={8} md={12}>
    <HvGlobalActions title="Dashboard" />
  </HvGrid>
  {Array.from({ length: 4 }).map((v, i) => {
    return (
      <HvGrid item xs={4} sm={4} md={3} lg={3} key={i}>
        <HvCard
          statusColor={i === 0 ? "warning" : "positive"}
          bgcolor="bgContainer"
        >
          <HvCardContent className="grid gap-sm pb-xs!">
            <div className="flex items-center gap-xxs">
              <HvIconContainer
                size="xs"
                className="p-4px rounded-round bg-bgContainerSecondary border border-borderSubtle"
              >
                <div className="i-ph-copy-simple" />
              </HvIconContainer>
              <HvTypography variant="title3">KPI {i + 1}</HvTypography>
            </div>
            <div className="flex items-baseline gap-2px">
              <HvTypography variant="title3">
                {(((i + 1) / (i + 2)) * 100).toFixed(0)}
              </HvTypography>
              <HvTypography variant="caption2" className="text-textSubtle">
                %
              </HvTypography>
            </div>
          </HvCardContent>
        </HvCard>
      </HvGrid>
    );
  })}
  <HvGrid item xs={4} sm={8} md={12}>
    <HvCard bgcolor="atmo1">
      <HvCardContent>
        <HvVizProvider>
          <HvBarChart
            height={300}
            data={{
              Group: ["Group 1", "Group 2", "Group 3"],
              "Sales Target": [2300, 1000, 7800],
              "Sales Per Rep": [6000, 3900, 1000],
              "Monthly Sales": [3700, 6700, 1100],
              Target: [2100, 7700, 3000],
              Cash: [500, 7600, 7800],
            }}
            groupBy="Group"
            measures={[
              "Sales Target",
              "Sales Per Rep",
              "Monthly Sales",
              "Target",
              "Cash",
            ]}
            horizontal
            grid={{ bottom: 0 }}
          />
        </HvVizProvider>
      </HvCardContent>
    </HvCard>
  </HvGrid>
</HvGrid>

<HvGrid columns="auto" container>
  <HvGrid item xs={4} sm={8} md={12}>
    <HvGlobalActions title="Dashboard" />
  </HvGrid>
  {Array.from({ length: 4 }).map((v, i) => {
    return (
      <HvGrid item xs={4} sm={4} md={3} lg={3} key={i}>
        <HvCard
          statusColor={i === 0 ? "warning" : "positive"}
          bgcolor="bgContainer"
        >
          <HvCardContent className="grid gap-sm pb-xs!">
            <div className="flex items-center gap-xxs">
              <HvIconContainer
                size="xs"
                className="p-4px rounded-round bg-bgContainerSecondary border border-borderSubtle"
              >
                <div className="i-ph-copy-simple" />
              </HvIconContainer>
              <HvTypography variant="title3">KPI {i + 1}</HvTypography>
            </div>
            <div className="flex items-baseline gap-2px">
              <HvTypography variant="title3">
                {(((i + 1) / (i + 2)) * 100).toFixed(0)}
              </HvTypography>
              <HvTypography variant="caption2" className="text-textSubtle">
                %
              </HvTypography>
            </div>
          </HvCardContent>
        </HvCard>
      </HvGrid>
    );
  })}
  <HvGrid item xs={4} sm={8} md={12}>
    <HvCard bgcolor="atmo1">
      <HvCardContent>
        <HvVizProvider>
          <HvBarChart
            height={300}
            data={{
              Group: ["Group 1", "Group 2", "Group 3"],
              "Sales Target": [2300, 1000, 7800],
              "Sales Per Rep": [6000, 3900, 1000],
              "Monthly Sales": [3700, 6700, 1100],
              Target: [2100, 7700, 3000],
              Cash: [500, 7600, 7800],
            }}
            groupBy="Group"
            measures={[
              "Sales Target",
              "Sales Per Rep",
              "Monthly Sales",
              "Target",
              "Cash",
            ]}
            horizontal
            grid={{ bottom: 0 }}
          />
        </HvVizProvider>
      </HvCardContent>
    </HvCard>
  </HvGrid>
</HvGrid>

Simple Grid

The HvSimpleGrid component is a simplified alternative to HvGrid, perfect for responsive layouts where each item takes up equal space and adapts to screen size changes. Use it when you need a uniform grid with a fixed number of equally sized columns.

Unlike HvGrid, it doesn’t rely on default breakpoints. Instead, you can define custom breakpoints, column counts, and spacing. It doesn’t support column spans—each item always takes up one column—making it ideal for simpler, evenly spaced layouts.

Card 0