Good Text Format Shows Greate Web Content.
Text
The <Text /> is used to create text
| Prop | Description | Value(s) |
|---|---|---|
| `id` | HTML id attribute for the component | `String` |
| `size` | Size of the text | `"smaller" | "small" | "big" | "bigger" | "jumbo"` |
| `bg` | Background color | `CSS color values` |
| `color` | Text color | `CSS color values` |
| `children` | Content to be displayed within the Text component | `React nodes` |
| `hoverBg` | Background color on hover | `CSS color values` |
| `hoverText` | Text color on hover | `CSS color values` |
| `text` | Additional text content | `String` |
| `heading` | Heading style | `"h1" | "h2" | "h3" | "h4" | "h5" | "h6"` |
| `funcss` | Custom class for Funcss styles | `String` |
| `emp` | Display text in emphasized style | `Boolean` |
| `bold` | Display text in bold style | `Boolean` |
| `block` | Display the component as a block-level element | `Boolean` |
| `body` | Apply body text styles | `Boolean` |
| `article` | Apply article text styles | `Boolean` |
| `light` | Apply light text color | `Boolean` |
| `lighter` | Apply lighter text color | `Boolean` |
| `italic` | Italicize the text | `Boolean` |
| `underline` | Underline the text | `Boolean` |
| `quote` | Add a quote icon at the begining | `Boolean` |
| `align` | Text alignment | `"left" | "center" | "right" | "justify"` |
| `lineHeight` | Line height of the text | `String` |
| `letterSpacing` | Letter spacing of the text | `String` |
| `monospace` | Use monospace font | `Boolean` |
| `customStyles` | Custom inline styles object | `React.CSSProperties` |
| `onClick` | Click event handler | `() => void` |
#
Font Size
The size prop is use to give font size to your text
React / Next.js Show Source Code
Jumbo Text
Bigger Text
Big Text
#
Heading Element
The "heading" prop is use to create headings
React / Next.js Show Source Code
H1 Font with weight is 200
H2 Heading in Italic
H3 Heading Element
#
Hover Color
The "hoverText" prop is use to change the color of your text when a user hover on it
React / Next.js Show Source Code
Move the cursor on top to change color
#
Article
The article prop gives your Text a good line height and makes text clear for the user to read
React / Next.js Show Source Code
Text in Web Design
The importance of text in article
Text plays a crucial role in web design as it impacts how users perceive and engage with a website. The right Text can help to create a visual hierarchy, improve readability, sand enhance the overall user experience. #
Text Formatting
You can also format text with the props listed on the table.
React / Next.js Show Source Code
Self Forgiveness
Self forgiveness is one of the most unselfish things you can do. Everyone around benefits as you become less demanding, more giving and more forgiving