From fb8de565863cc666db06d3bc30a1809b584171bb Mon Sep 17 00:00:00 2001 From: Yash Sehgal Date: Thu, 17 Mar 2022 14:55:39 +0000 Subject: [PATCH] docs: documented heading component (wip) --- components/typography/README.md | 53 +++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 components/typography/README.md diff --git a/components/typography/README.md b/components/typography/README.md new file mode 100644 index 000000000000..2598ee04f676 --- /dev/null +++ b/components/typography/README.md @@ -0,0 +1,53 @@ +# Typography + +Typography components have been added to the components according to the design requirements of the website. Typographies are classified into three types. Heading, Paragraph and TextLink. + +## How to use? + +### Headings + +```jsx +This is a heading +``` + +There are attributes that you can use to manage different heading styles. Such as `level`, `typeStyle`, `textColor`. + +- **Setting up Heading Levels** + + - Levels work just like the sequence of headings from `

` to `

`. You can set levels by using the `level` prop. Here's an example below on how to use it. + + ```jsx + This is a heading + This is a heading + This is a heading + This is a heading + This is a heading + This is a heading + ``` + + - By default, the `level` of heading has been set to `h2`. + +- **Setting up Heading Type Styles** + + - There are several type-styles for Heading component which can be used by using `typeStyle` attribute. Here's an example below on how to use it. + + ```jsx + This is medium heading + ``` + + - Here's a list of `typeStyles` you can use in Headings. + + | `typeStyle` value | Tailwind class | + |-------------------|----------------| + | `typeStyle="heading-xl"` | `font-heading text-2xl font-bold tracking-heading md:text-6xl leading-snug` | + | `typeStyle="heading-lg"` | `font-heading text-2xl font-bold tracking-heading md:text-4xl leading-snug` | + | `typeStyle="heading-md"` | `font-heading text-2xl font-bold tracking-heading leading-snug` | + | `typeStyle="heading-md-semibold"` | `font-heading text-2xl font-semibold tracking-heading leading-snug` | + | `typeStyle="heading-sm"` | `font-heading text-xl font-bold tracking-heading leading-snug` | + | `typeStyle="heading-sm-semibold"` | `font-heading text-xl font-semibold tracking-heading leading-snug` | + | `typeStyle="heading-xs"` | `font-heading text-base font-bold tracking-heading leading-snug` | + | `typeStyle="heading-xs-semibold"` | `font-heading text-base font-semibold tracking-heading leading-snug` | + | `typeStyle="body-lg"` | `font-heading text-lg leading-relaxed tracking-body font-regular` | + | `typeStyle="body-md"` | `font-heading text-base leading-relaxed tracking-body font-regular` | + | `typeStyle="body-sm"` | `font-heading text-sm leading-relaxed tracking-body font-regular` | + | default type-style | `font-heading text-2xl font-bold tracking-heading md:text-6xl leading-snug` |