Baseline

Ready

Baseline is a general use helper component to set items below to each other in a single column. It's similar to the <hy-row> component, but affects vertical spacing.

# Examples

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

undefined
<hy-baseline>
  <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-baseline>

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

undefined
<hy-baseline margin="3">
  <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-baseline>

# Properties

Property Attribute Description Type Default
margin margin Top margin to be added to all but first element. Amount of rem:s number 1

Helsinki University Design System

← Box →