Box

In progress

Box is the multitool of HUDS. It's a versatile flex container and grid element providing customizable paddings, height, responsive widths and more. It can be used for random spacing containers, padding helpers and positioning children with flexbox, as well as creating responsive grids of many types. NB! Box can be used only with components that have shadow = false.

# Examples

To add spacing of fixed height, just use the h property, that takes a integer representing multiples of 1rem (16px)

Im above the spacing Im below the spacing
<hy-heading heading="h3">Im above the spacing</hy-heading>
<hy-box h="2" bg="grayscale-medium" />
<hy-heading heading="h3">Im below the spacing</hy-heading>

You can also use the hy-box to add padding to elements that don't have one defined or use it as a flex container. Note, that you can

No padding for me I'm comfortably padded I'm centered Responsive padding on the left side
<hy-baseline margin="1">
  <hy-box bg="brand-main-light">
    <hy-heading heading="h4" negative>No padding for me</hy-heading>
  </hy-box>
  <hy-box p="2" bg="grayscale-medium">
    <hy-heading heading="h4">I'm comfortably padded</hy-heading>
  </hy-box>
  <hy-box p="1" bg="grayscale-dark" justify="center">
    <hy-heading heading="h4" negative>I'm centered</hy-heading>
  </hy-box>
  <hy-box p="1" pl="1,1,2,4" bg="grayscale-dark" justify="center">
    <hy-box bg="grayscale-white">
      <hy-heading heading="h4">Responsive padding on the left side</hy-heading>
    </hy-box>
  </hy-box>
</hy-baseline>

You can also use the hy-box to add margins to elements that don't have one defined or use it as a flex container. In the example below mb = margin-bottom: 1st value is used for mobile screens up to 30rem; 2ns value is used for tablet screens,30-60rem 3rd value is used in desktops of 60-75rem (if there is no side navigation bar on the page) or in desktops 60-00.0625rem (if there is side navigation on the page) 4rh value is used in large desktops, >100.0625rem.

wide
<hy-box-container style="border: 1px solid blue;">
  <hy-box mb="1.75, 1.75, 2, 2.5" />
  <div style="border: 1px solid black;">wide</div>
</hy-box-container>

If you wrap a list of Boxes in <hy-box-container /> element, you can make a responsive grid. Note that you can compose boxes indefinitely.

wide narrow narrow wide wide narrow
<hy-box-container>
  <hy-box p="0.5" width="100, 50, 67">
    <hy-box p="1" bg="grayscale-medium" justify="center">
      <hy-paragraph-text>wide</hy-paragraph-text>
    </hy-box>
  </hy-box>
  <hy-box p="0.5" width="100, 50, 33">
    <hy-box p="1" bg="grayscale-medium" justify="center">
      <hy-paragraph-text>narrow</hy-paragraph-text>
    </hy-box>
  </hy-box>
  <hy-box p="0.5" width="100, 50, 33">
    <hy-box p="1" bg="grayscale-medium" justify="center">
      <hy-paragraph-text>narrow</hy-paragraph-text>
    </hy-box>
  </hy-box>
  <hy-box p="0.5" width="100, 50, 67">
    <hy-box p="1" bg="grayscale-medium" justify="center">
      <hy-paragraph-text>wide</hy-paragraph-text>
    </hy-box>
  </hy-box>
  <hy-box p="0.5" width="100, 50, 67">
    <hy-box p="1" bg="grayscale-medium" justify="center">
      <hy-paragraph-text>wide</hy-paragraph-text>
    </hy-box>
  </hy-box>
  <hy-box p="0.5" width="100, 50, 33">
    <hy-box p="1" bg="grayscale-medium" justify="center">
      <hy-paragraph-text>narrow</hy-paragraph-text>
    </hy-box>
  </hy-box>
</hy-box-container>

# Properties

Property Attribute Description Type Default
align align value for vertical alignment (align-items) string 'baseline'
bg bg background color. Must use one of css variable names from color tokens string 'transparent'
direction direction Value for flex direction string 'row'
h h fixed height for the container, useful for extra spacing containers number undefined
headerstyle headerstyle string 'common'
justify justify Value for horisontal alignment (justify-content) string 'flex-start'
m m All sides margin value in rems. Responsive when given Comma separated values. string undefined
mb mb Bottom margin in rems. Responsive when given Comma separated values. string undefined
ml ml Left margin in rems. Responsive when given Comma separated values. string undefined
mr mr Right margin in rems. Responsive when given Comma separated values. string undefined
mt mt Top margin in rems. Responsive when given Comma separated values. string undefined
p p All sides padding value in rems. Responsive when given Comma separated values. string undefined
pb pb Bottom padding in rems. Responsive when given Comma separated values. string undefined
pl pl Left padding in rems. Responsive when given Comma separated values. string undefined
pr pr Right padding in rems. Responsive when given Comma separated values. string undefined
pt pt Top padding in rems. Responsive when given Comma separated values. string undefined
width width Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value. string '100'

Helsinki University Design System

# Dependencies

# Used by

Helsinki University Design System

← Button →