components
Paragraph (code)
A paragraph is meant for a distinct section of a piece of writing, usually dealing with a single theme
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| as | FunctionStringNodeObject | 'p' | - | Change the rendered HTML tag e.g. span, p, h1 |
| children | Node | - | true | Content for component *required |
| className | String | - | - | Extend classNames. |
| color | String | - | - | Changes the Paragraph's color, choose one of the tokens. |
| decoration | 'inherit''none''underline''line-through' | 'none' | - | Sets the css text-decoration property. |
| fontFamily | 'inherit''primary''secondary''system' | 'system' | - | Sets the css font-family property. |
| fontStyle | 'inherit''normal''italic''oblique' | - | - | Sets the css font-style property. |
| fontWeight | 'inherit''regular''medium''bold' | - | - | Sets the css font-weight property. |
| style | {} | - | - | Extend style |
| textAlign | 'inherit''left''right''center''justify' | 'inherit' | - | Sets the css text-align property. |
| textTransform | 'inherit''none''capitalize''uppercase''lowercase' | - | - | Sets the css text-transform property. |
System Props
color
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
m, mb, ml, mr, mt, mx, my
fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform
float
display
p, pb, pl, pr, pt, px, py
width, maxWidth
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Color
default: colorBlackBase
You can change the paragraph's color by passing in a defined color name.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Decoration
default: none
Controls the text-decoration css attribute.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
FontFamily
default: system
Font-families can be used to discern between multiple uses of a Paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
FontWeight
default: undefined
Controls the font-weight css attribute. Only 3 values are available. If a value is missing, it will fallback on the more bold weight.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
TextAlign
default: inherit
Controls the css text-align attribute.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius euismod semper. Nulla lorem lorem, aliquam non neque in, dictum eleifend tortor. Suspendisse potenti.