Heading - Chakra UI | Design System Built With React

Trang chủ » Chakra Ui H1 » Heading - Chakra UI | Design System Built With React

Có thể bạn quan tâm

Heading

Headings are used for rendering headlines.

Heading composes Box so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

Import#

import { Heading } from "@chakra-ui/core";import{Heading}from"@chakra-ui/core";copy

Usage#

I'm a Heading

<Heading>I'm a Heading</Heading><Heading>I'm a Heading</Heading>copyEditable Example

Changing font size#

To increase the size of the heading, you can use the fontSize or size prop. If you use the size prop, the font size of the heading will automatically decrease in size for smaller screens.

In love with React & Next

In love with React & Next

In love with React & Next

In love with React & Next

In love with React & Next
In love with React & Next
<Stack spacing={3}> <Heading as="h1" size="2xl"> In love with React & Next </Heading> <Heading as="h2" size="xl"> In love with React & Next </Heading> <Heading as="h3" size="lg"> In love with React & Next </Heading> <Heading as="h4" size="md"> In love with React & Next </Heading> <Heading as="h5" size="sm"> In love with React & Next </Heading> <Heading as="h6" size="xs"> In love with React & Next </Heading> </Stack><Stackspacing={3}><Headingas="h1"size="2xl"> In love with React & Next</Heading><Headingas="h2"size="xl"> In love with React & Next</Heading><Headingas="h3"size="lg"> In love with React & Next</Heading><Headingas="h4"size="md"> In love with React & Next</Heading><Headingas="h5"size="sm"> In love with React & Next</Heading><Headingas="h6"size="xs"> In love with React & Next</Heading></Stack>copyEditable Example

Truncate heading#

Pass the isTruncated prop to render an ellipsis when the headings exceeds

Basic text writing, including headings, body text, lists, and more.

<Heading isTruncated> Basic text writing, including headings, body text, lists, and more. </Heading><HeadingisTruncated> Basic text writing, including headings, body text, lists, and more.</Heading>copyEditable Example

Override style#

You can override the size of the Heading component by passing the fontSize prop. No need to write css or styled()

I'm overriding this heading

<Heading size="lg" fontSize="50px"> I'm overriding this heading </Heading><Headingsize="lg"fontSize="50px">I'm overriding this heading</Heading>copyEditable Example

Composition#

Modern online and offline payments for Africa

Paystack helps businesses in Africa get paid by anyone, anywhere in the world

Create a free account// Example from paystack.com <Box maxW="32rem"> <Heading mb={4}>Modern online and offline payments for Africa</Heading> <Text fontSize="xl"> Paystack helps businesses in Africa get paid by anyone, anywhere in the world </Text> <Button size="lg" variantColor="green" mt="24px"> Create a free account </Button> </Box>// Example from paystack.com<BoxmaxW="32rem"><Headingmb={4}>Modern online and offline payments for Africa</Heading><TextfontSize="xl"> Paystack helps businesses in Africa get paid by anyone, anywhere in the world</Text><Buttonsize="lg"variantColor="green"mt="24px"> Create a free account</Button></Box>copyEditable Example

Props#

The Heading composes the Box component, so you can pass all Box props.

NameTypeDefaultDescription
size2xl, xl , lg, md, sm, xsxlThe size of the heading.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo

Từ khóa » Chakra Ui H1