Heading
Headings are a typographic component that create semantic structure, allow users to scan content by creating relative visual prominence and support search engine optimisation.
import { ... } from '@ag.ds-next/react/heading';Usage
Heading components can be imported via the heading entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/heading';Props
| Prop | Type | Description |
|---|---|---|
| alignItems? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "baseline"> | Sets the CSS align-items property.https://developer.mozilla.org/en-US/docs/Web/CSS/align-items |
| as? | ElementType<any> | |
| background? | ResponsiveProp<"body" | "info" | "success" | "error" | "warning" | "shade" | "bodyAlt" | "shadeAlt"> | Maps tokens to the CSS background-color property.https://developer.mozilla.org/en-US/docs/Web/CSS/background-color |
| border? | ResponsiveProp<boolean> | If true, renders a border on all sides using the relevant width. |
| borderBottom? | ResponsiveProp<boolean> | If true, renders a border on the bottom side using the relevant width. |
| borderBottomWidth? | ResponsiveProp<"md" | "lg" | "xl" | "sm" | "none" | "xxl"> | Maps tokens to the CSS border-bottom-width property.https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width |
| borderColor? | ResponsiveProp<"border" | "selected" | "muted" | "accent" | "info" | "success" | "error" | "warning"> | Maps tokens to the CSS border-color property. Default: 'border'.https://developer.mozilla.org/en-US/docs/Web/CSS/border-color |
| borderLeft? | ResponsiveProp<boolean> | If true, renders a border on the left side using the relevant width. |
| borderLeftWidth? | ResponsiveProp<"md" | "lg" | "xl" | "sm" | "none" | "xxl"> | Maps tokens to the CSS border-left-width property.https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width |
| borderRight? | ResponsiveProp<boolean> | If true, renders a border on the right side using the relevant width. |
| borderRightWidth? | ResponsiveProp<"md" | "lg" | "xl" | "sm" | "none" | "xxl"> | Maps tokens to the CSS border-right-width property.https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width |
| borderTop? | ResponsiveProp<boolean> | If true, renders a border on the top side using the relevant width. |
| borderTopWidth? | ResponsiveProp<"md" | "lg" | "xl" | "sm" | "none" | "xxl"> | Maps tokens to the CSS border-top-width property.https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width |
| borderWidth? | ResponsiveProp<"md" | "lg" | "xl" | "sm" | "none" | "xxl"> | Maps tokens to the CSS border-width property. Default: 'sm'.https://developer.mozilla.org/en-US/docs/Web/CSS/border-width |
| borderX? | ResponsiveProp<boolean> | If true, renders a border on the left and right sides using the relevant width. |
| borderY? | ResponsiveProp<boolean> | If true, renders a border on the top and bottom sides using the relevant width. |
| breakWords? | boolean | If true, applies the CSS word-break: break-word property, or word-break: normal if false.https://developer.mozilla.org/en-US/docs/Web/CSS/word-break |
| color? | ResponsiveProp<"text" | "inherit" | "action" | "selected" | "muted" | "accent" | "info" | "success" | "error" | "warning"> | Maps tokens to the CSS color property.https://developer.mozilla.org/en-US/docs/Web/CSS/color |
| columnGap? | ResponsiveProp<Spacing> | Maps tokens to the CSS column-gap property.https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap |
| dark? | boolean | Sets the colour palette to dark always.https://design-system.agriculture.gov.au/foundations/tokens/colour |
| display? | ResponsiveProp<"block" | "none" | "grid" | "table" | "flex" | "inline" | "inline-block" | "inline-flex" | "table-row-group" | "table-header-group" | "table-footer-group" | "table-row" | ... 4 more ... | "inline-grid"> | Sets the CSS display property.https://developer.mozilla.org/en-US/docs/Web/CSS/display |
| flexDirection? | ResponsiveProp<"row" | "column" | "row-reverse" | "column-reverse"> | Sets the CSS flex-direction property.https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction |
| flexGrow? | ResponsiveProp<number> | Sets the CSS flex-grow property.https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow |
| flexShrink? | ResponsiveProp<number> | Sets the CSS flex-shrink property.https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink |
| flexWrap? | ResponsiveProp<"nowrap" | "wrap" | "wrap-reverse"> | Sets the CSS flex-wrap property.https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap |
| focus? | boolean | @deprecated use focusRingFor="keyboard". |
| focusRingFor? | "all" | "keyboard" | Display a focus indicator when the element receives focus. 'all' shows for all users, includes programmatic focus, and 'keyboard' is for keyboard-only focus |
| fontFamily? | ResponsiveProp<"body" | "monospace"> | Maps tokens to the CSS font-family property.https://developer.mozilla.org/en-US/docs/Web/CSS/font-family |
| fontSize? | ResponsiveProp<FontSize> | Maps tokens to the CSS font-size property.https://developer.mozilla.org/en-US/docs/Web/CSS/font-size |
| fontWeight? | ResponsiveProp<"normal" | "bold"> | Maps tokens to the CSS font-weight property.https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight |
| gap? | ResponsiveProp<Spacing> | Maps tokens to the CSS gap property.https://developer.mozilla.org/en-US/docs/Web/CSS/gap |
| gridColumnEnd? | ResponsiveProp<number> | Sets the CSS grid-column-end property.https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end |
| gridColumnSpan? | ResponsiveProp<number> | Sets a subset of the CSS grid-columns property.https://developer.mozilla.org/en-US/docs/Web/CSS/grid-columns |
| gridColumnStart? | ResponsiveProp<number> | Sets the CSS grid-column-start property.https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start |
| height? | ResponsiveProp<string | number> | Sets the CSS height property.https://developer.mozilla.org/en-US/docs/Web/CSS/height |
| highContrastOutline? | boolean | If true, a solid outline will be visible in windows high contrast mode. |
| justifyContent? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"> | Sets the CSS justify-content property.https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content |
| light? | boolean | Sets the colour palette to light always.https://design-system.agriculture.gov.au/foundations/tokens/colour |
| lineHeight? | "heading" | "nospace" | "default" | Maps tokens to the CSS line-height property.https://developer.mozilla.org/en-US/docs/Web/CSS/line-height |
| link? | boolean | |
| maxHeight? | ResponsiveProp<string | number> | Sets the CSS max-height property.https://developer.mozilla.org/en-US/docs/Web/CSS/max-height |
| maxWidth? | ResponsiveProp<string | number> | Sets the CSS max-width property.https://developer.mozilla.org/en-US/docs/Web/CSS/max-width |
| minHeight? | ResponsiveProp<string | number> | Sets the CSS min-height property.https://developer.mozilla.org/en-US/docs/Web/CSS/min-height |
| minWidth? | ResponsiveProp<string | number> | Sets the CSS min-width property.https://developer.mozilla.org/en-US/docs/Web/CSS/min-width |
| padding? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding property.https://developer.mozilla.org/en-US/docs/Web/CSS/padding |
| paddingBottom? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding-bottom property.https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom |
| paddingLeft? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding-left property.https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left |
| paddingRight? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding-right property.https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right |
| paddingTop? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding-top property.https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top |
| paddingX? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding-left and padding-right properties.https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left |
| paddingY? | ResponsiveProp<Spacing> | Maps tokens to the CSS padding-bottom and padding-top properties.https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom |
| palette? | ResponsiveProp<"dark" | "light"> | Sets the colour palette, which can also be changed at breakpoints.https://design-system.agriculture.gov.au/foundations/tokens/colour |
| ref? | Ref<Comp extends "symbol" | "pattern" | "text" | "image" | "switch" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | ... 47 more ... | keyof HTMLElementTagNameMap ? ElementTagNameMap[Comp] : Comp extends new (...args: any) => any ? InstanceType<...> : undefined> | |
| rounded? | boolean | If true, rounds the element's corners by mapping tokens.borderRadius to the CSS border-radius property.https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius |
| rowGap? | ResponsiveProp<Spacing> | Maps tokens to the CSS row-gap property.https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap |
| textAlign? | ResponsiveProp<"left" | "right" | "center"> | Maps tokens to the CSS text-align property.https://developer.mozilla.org/en-US/docs/Web/CSS/text-align |
| type? | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | The heading level. |
| width? | ResponsiveProp<string | number> | Sets the CSS width property.https://developer.mozilla.org/en-US/docs/Web/CSS/width |
Source
You can view the full source code for this package on Github.