Skip to content

Commit

Permalink
Update typography.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
@dragosct
dragosct committed Sep 5, 2024
1 parent ebe64bb commit 08a6250
Showing 1 changed file with 102 additions and 60 deletions.
162 changes: 102 additions & 60 deletions documentation/html/typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,10 @@ Use this simple paragraph example for any type of web page.
component={<HTMLTypographyExamples.TypographyDefault/>}
>
```html
<p
class="block font-sans text-base antialiased font-light leading-relaxed text-inherit">
Material Tailwind is an easy to use components library for Tailwind CSS
and Material Design. It provides a simple way to customize your
components, you can change the colors, fonts, breakpoints and everything
you need.
</p>
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

Expand All @@ -64,27 +61,77 @@ Organize and structure text to improve readability and accessibility with Materi
component={<HTMLTypographyExamples.TypographyVariants/>}
>
```html
<div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-inherit">
Material Tailwind
</h1>
<h2 class="block antialiased tracking-normal font-sans text-4xl font-semibold leading-[1.3] text-inherit">
Material Tailwind
</h2>
<h3 class="block font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-inherit">
Material Tailwind
</h3>
<h4 class="block font-sans text-2xl antialiased font-semibold leading-snug tracking-normal text-inherit">
Material Tailwind
</h4>
<h5 class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-inherit">
Material Tailwind
</h5>
<h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
Material Tailwind
</h6>

</div>
<h1
class="font-bold leading-snug tracking-tight text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-5xl"
>
H1 Get ready to experience a new level of performance and functionality.
</h1>

<h1
class="font-light leading-snug tracking-tight text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-5xl"
>
H1 Get ready to experience a new level of performance and functionality.
</h1>

<h2
class="font-bold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-4xl"
>
H2 Get ready to experience a new level of performance and functionality.
</h2>

<h2
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-4xl"
>
H2 Get ready to experience a new level of performance and functionality.
</h2>

<h3
class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-xl max-w-lg lg:max-w-2xl lg:text-3xl"
>
H3 Get ready to experience a new level of performance and functionality.
</h3>

<h3
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-xl max-w-lg lg:max-w-2xl lg:text-3xl"
>
H3 Get ready to experience a new level of performance and functionality.
</h3>

<h4
class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-lg max-w-md lg:max-w-xl lg:text-2xl"
>
H4 Get ready to experience a new level of performance and functionality.
</h4>

<h4
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-lg max-w-md lg:max-w-xl lg:text-2xl"
>
H4 Get ready to experience a new level of performance and functionality.
</h4>

<h5
class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-base max-w-sm lg:max-w-lg lg:text-xl"
>
H5 Get ready to experience a new level of performance and functionality.
</h5>

<h5
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-base max-w-sm lg:max-w-lg lg:text-xl"
>
H5 Get ready to experience a new level of performance and functionality.
</h5>

<h6
class="font-bold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-sm max-w-xs lg:max-w-md lg:text-lg"
>
H6 Get ready to experience a new level of performance and functionality.
</h6>

<h6
class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-sm max-w-xs lg:max-w-md lg:text-lg"
>
H6 Get ready to experience a new level of performance and functionality.
</h6>
```
</CodePreview>

Expand All @@ -101,11 +148,10 @@ Highlight the key message or value proposition of a page or section with our lea
component={<HTMLTypographyExamples.TypographyLoadText/>}
>
```html
<p class="block font-sans text-xl antialiased font-normal leading-relaxed text-inherit">
Material Tailwind is an easy to use components library for Tailwind CSS and
Material Design. It provides a simple way to customize your components, you
can change the colors, fonts, breakpoints and everything you need.
</p>
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

Expand All @@ -122,11 +168,10 @@ See below how you can implement a paragraph with Material Tailwind.
component={<HTMLTypographyExamples.TypographyParagraph/>}
>
```html
<p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit">
Material Tailwind is an easy to use components library for Tailwind CSS and
Material Design. It provides a simple way to customize your components, you
can change the colors, fonts, breakpoints and everything you need.
</p>
<p className="font-light leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

Expand All @@ -143,11 +188,10 @@ Use this example of small text for disclaimers, footnotes, labels, and as second
component={<HTMLTypographyExamples.TypographySmallText/>}
>
```html
<p class="block font-sans text-sm antialiased font-light leading-normal text-inherit">
Material Tailwind is an easy to use components library for Tailwind CSS and
Material Design. It provides a simple way to customize your components, you
can change the colors, fonts, breakpoints and everything you need.
</p>
<p className="font-light leading-relaxed mx-auto text-slate-500 text-sm max-w-3xl">
The time is now for it to be okay to be great. For being a bright color.
For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

Expand All @@ -164,20 +208,18 @@ Implement different colors for your typography depending on the message you want
component={<HTMLTypographyExamples.TypographyColors/>}
>
```html
<div class="flex flex-col gap-8 text-left">
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-blue-gray-900">
Material Tailwind
</h1>
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-blue-500">
Material Tailwind
</h1>
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-red-500">
Material Tailwind
</h1>
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-green-500">
Material Tailwind
</h1>
</div>
<h1 class="font-bold leading-snug tracking-tight text-slate-800 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-blue-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-red-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-green-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
```
</CodePreview>

Expand All @@ -194,9 +236,9 @@ You can implement gradient colors for your typography. See below how you can do
component={<HTMLTypographyExamples.TypographyGradientColor/>}
>
```html
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-transparent bg-gradient-to-tr from-blue-600 to-blue-400 bg-clip-text">
Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight bg-gradient-to-tr from-slate-800 to-slate-500 bg-clip-text text-transparent mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
Material Tailwind
</h1>
```
</CodePreview>

Expand Down

0 comments on commit 08a6250

Please sign in to comment.