Heading
Type: React component
How to get Heading?
JavaScript
import { Heading } from 'fds/components';
Heading creates a visually outstanding text with the primary goal of attracting attention. A Heading is visualized significantly larger than the base text size.
Props
align
(Optional)
Type: String
The horizontal alignment of the (textual) content. The possible values are:
-
'left'
-
'center'
-
'right'
Default value
-
children
(Required)
Type: ReactNode
color
Name (Optional)
Type: String
The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.
When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.
The possible values can be found in the example.
Related links
Default value
icon
(Optional)
Type: String
The name of the icon displayed in the component.
This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.
Default value
is
Bold (Optional)
Type: Boolean
Whether or not the textual content of the component should be rendered in a bold font weight.
Default value
level
(Required)
Type: Number
The level of the heading, a higher level renders a visually smaller heading. The possible values are:
-
'1'
-
'2'
-
'3'
-
'4'
-
user
Select (Optional)
Type: String
The CSS value for user-select. The possible values are:
-
'none',
-
'text'
Defaults to 'text'.
Default value
-