Heading - Vision UI Dashboard - Creative Tim

Trang chủ » H1 Chakra Ui » Heading - Vision UI Dashboard - Creative Tim

Có thể bạn quan tâm

Skip to Content
  • Docs

Getting Started

InstallationChangelogRouting

Theme

  • Theme (Colors, etc)

Layout

  • Box
  • Cards
  • Fixed Plugin
  • Flex
  • Grid
  • Separator
  • SimpleGrid
  • Stack

Forms

  • Button
  • Form Control
  • Icon Button
  • Input
  • Switch

Data Display

  • Badge
  • Charts
  • Close Button
  • List
  • Stat
  • Table
  • Timeline

Feedback

  • Alerts
  • Progress

Typography

  • Text
  • Heading

Overlay

  • Menu
  • Modal

Navigation

  • Breadcrumb
  • Link
  • Navbar
  • Sidebar

Media and icons

  • Avatar
  • Icon
  • Image

Others

  • CalendarPRO
  • Data TablesPRO
  • Gradient Border
  • KanbanPRO
  • Portal
  • QuillPRO
  • React GlobePRO
  • WizardPRO

Hooks

  • useDisclosure
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/react"copy

Usage#

<Heading>I'm a Heading</Heading>copy<Heading>I'm a Heading</Heading>copy

Changing font size#

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

<Stackspacing={6}><Headingas="h1"size="4xl"isTruncated>(4xl) In love with React & Next</Heading><Headingas="h2"size="3xl"isTruncated>(3xl) In love with React & Next</Heading><Headingas="h2"size="2xl">(2xl) In love with React & Next</Heading><Headingas="h2"size="xl">(xl) In love with React & Next</Heading><Headingas="h3"size="lg">(lg) In love with React & Next</Heading><Headingas="h4"size="md">(md) In love with React & Next</Heading><Headingas="h5"size="sm">(sm) In love with React & Next</Heading><Headingas="h6"size="xs">(xs) In love with React & Next</Heading></Stack>copy<Stackspacing={6}><Headingas="h1"size="4xl"isTruncated>(4xl)In love withReact&Next</Heading><Headingas="h2"size="3xl"isTruncated>(3xl)In love withReact&Next</Heading><Headingas="h2"size="2xl">(2xl)In love withReact&Next</Heading><Headingas="h2"size="xl">(xl)In love withReact&Next</Heading><Headingas="h3"size="lg">(lg)In love withReact&Next</Heading><Headingas="h4"size="md">(md)In love withReact&Next</Heading><Headingas="h5"size="sm">(sm)In love withReact&Next</Heading><Headingas="h6"size="xs">(xs)In love withReact&Next</Heading></Stack>copy

Truncate heading#

Pass the isTruncated prop to render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

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

Override style#

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

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

Composition#

// Example from paystack.com<LightMode><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"colorScheme="green"mt="24px"> Create a free account</Button></Box></LightMode>copy// Example from paystack.com<BoxmaxW="32rem"><Headingmb={4}>Modern online and offline payments forAfrica</Heading><TextfontSize="xl">Paystack helps businesses inAfricaget paid by anyone, anywhere in the world</Text><Buttonsize="lg"colorScheme="green"mt="24px">Create a free account</Button></Box>copy

Props#

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

colorScheme

Description

Color Schemes for Heading are not implemented in the default theme. You can extend the theme to implement them.

Type"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

orientation

Type"horizontal" | "vertical"

size

Type"sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl"Default"xl"

styleConfig

TypeRecord<string, any>

variant

Description

Variants for Heading are not implemented in the default theme. You can extend the theme to implement them.

Typestring

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License

On this page

  1. Import
  2. Usage
  3. Changing font size
  4. Truncate heading
  5. Override style
  6. Composition
  7. Props

Từ khóa » H1 Chakra Ui