readme.md

hy-box

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'
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'

Dependencies

Used by

• hy-accordion-container
• hy-adjacent-image-text
• hy-banner
• hy-heading
• hy-hero
• hy-image
• hy-introduction
• hy-key-figure-group
• hy-link-box-list
• hy-paragraph-text
• hy-process-flow-box
• hy-shortcuts
• hy-tabs
• hy-video

Graph

graph TD;
  hy-accordion-container --> hy-box
  hy-adjacent-image-text --> hy-box
  hy-banner --> hy-box
  hy-heading --> hy-box
  hy-hero --> hy-box
  hy-image --> hy-box
  hy-introduction --> hy-box
  hy-key-figure-group --> hy-box
  hy-link-box-list --> hy-box
  hy-paragraph-text --> hy-box
  hy-process-flow-box --> hy-box
  hy-shortcuts --> hy-box
  hy-tabs --> hy-box
  hy-video --> hy-box
  style hy-box fill:#f9f,stroke:#333,stroke-width:4px

---

Helsinki University Design System