Row

Ready

Row is a general use helper component to set items next to each other in a single row. It's similar to the <hy-baseline> component, but affects horizontal spacing.

# Examples

hy-row defaults to 1rem left margin with all items omitting the first one

undefined
<hy-row>
  <hy-box h="3" bg="brand-main">&nbsp</hy-box>
  <hy-box h="3" bg="brand-main">&nbsp</hy-box>
  <hy-box h="3" bg="brand-main">&nbsp</hy-box>
</hy-row>

With margin property you can customize the amount of margin you need

undefined
<hy-row margin="3rem">
  <hy-box h="3" bg="brand-main">&nbsp</hy-box>
  <hy-box h="3" bg="brand-main">&nbsp</hy-box>
  <hy-box h="3" bg="brand-main">&nbsp</hy-box>
</hy-row>

# Properties

Property Attribute Description Type Default
align align justify-content property. string 'center'
justify justify justify-content property. string 'stretch'
margin margin Left margin to be added to adjacent items. number 1

Helsinki University Design System

← Shortcut →