Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"Open Drop"
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. The sizing can be further adjusted using the size property.
1
2
3
4
5
6
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
"none"
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
The font size is primarily driven by the chosen tag. But, it can be adjusted via this size property. The tag should be set for semantic correctness and accessibility. This size property allows for stylistic adjustments.
{
"small": {
"value": 768,
"borderSize": {
"xsmall": "1px",
"small": "2px",
"medium": "4px",
"large": "6px",
"xlarge": "12px"
},
"edgeSize": {
"none": "0px",
"hair": "1px",
"xxsmall": "2px",
"xsmall": "3px",
"small": "6px",
"medium": "12px",
"large": "24px",
"xlarge": "48px"
},
"size": {
"xxsmall": "24px",
"xsmall": "48px",
"small": "96px",
"medium": "192px",
"large": "384px",
"xlarge": "768px",
"full": "100%"
}
},
"medium": {"value": 1536},
"large": {}
}
{
"none": "0px",
"hair": "1px",
"xxsmall": "3px",
"xsmall": "6px",
"small": "12px",
"medium": "24px",
"large": "48px",
"xlarge": "96px",
"responsiveBreakpoint": "small"
}
The level that impacts line-height, max-width, font size, weight and family of the Heading. Heading styling is automatically adjusted at different screen sizes. When the heading.responsiveBreakpoint is hit ("small" by default), all heading styles will automatically be adjusted. A heading of level 1, for example, will use the styling defined in heading level 2; a heading of level 2 will use the styling defined in heading level 3 and so forth. The tag in the DOM is not adjusted. A heading of level 1 remains an h1. The styling adjustment is intended to aid readability on smaller screens but will not semantically affect your application structure. If you do not want this responsive styling to occur, you can set header.responsiveBreakpoint to undefined.
{
"1": {
"font": {},
"small": {
"size": "34px",
"height": "40px",
"maxWidth": "816px"
},
"medium": {
"size": "50px",
"height": "56px",
"maxWidth": "1200px"
},
"large": {
"size": "82px",
"height": "88px",
"maxWidth": "1968px"
},
"xlarge": {
"size": "114px",
"height": "120px",
"maxWidth": "2736px"
}
},
"2": {
"font": {},
"small": {
"size": "26px",
"height": "32px",
"maxWidth": "624px"
},
"medium": {
"size": "34px",
"height": "40px",
"maxWidth": "816px"
},
"large": {
"size": "50px",
"height": "56px",
"maxWidth": "1200px"
},
"xlarge": {
"size": "66px",
"height": "72px",
"maxWidth": "1584px"
}
},
"3": {
"font": {},
"small": {
"size": "22px",
"height": "28px",
"maxWidth": "528px"
},
"medium": {
"size": "26px",
"height": "32px",
"maxWidth": "624px"
},
"large": {
"size": "34px",
"height": "40px",
"maxWidth": "816px"
},
"xlarge": {
"size": "42px",
"height": "48px",
"maxWidth": "1008px"
}
},
"4": {
"font": {},
"small": {
"size": "18px",
"height": "24px",
"maxWidth": "432px"
},
"medium": {
"size": "18px",
"height": "24px",
"maxWidth": "432px"
},
"large": {
"size": "18px",
"height": "24px",
"maxWidth": "432px"
},
"xlarge": {
"size": "18px",
"height": "24px",
"maxWidth": "432px"
}
},
"5": {
"font": {},
"small": {
"size": "16px",
"height": "22px",
"maxWidth": "384px"
},
"medium": {
"size": "16px",
"height": "22px",
"maxWidth": "384px"
},
"large": {
"size": "16px",
"height": "22px",
"maxWidth": "384px"
},
"xlarge": {
"size": "16px",
"height": "22px",
"maxWidth": "384px"
}
},
"6": {
"font": {},
"small": {
"size": "14px",
"height": "20px",
"maxWidth": "336px"
},
"medium": {
"size": "14px",
"height": "20px",
"maxWidth": "336px"
},
"large": {
"size": "14px",
"height": "20px",
"maxWidth": "336px"
},
"xlarge": {
"size": "14px",
"height": "20px",
"maxWidth": "336px"
}
}
}