Skip to content

Commit 08a6250

Browse files
dragosctdragosct
committed
Update typography.mdx
1 parent ebe64bb commit 08a6250

File tree

1 file changed

+102
-60
lines changed

1 file changed

+102
-60
lines changed

‎documentation/html/typography.mdx‎

Lines changed: 102 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,10 @@ Use this simple paragraph example for any type of web page.
4141
component={<HTMLTypographyExamples.TypographyDefault/>}
4242
>
4343
```html
44-
<p
45-
class="block font-sans text-base antialiased font-light leading-relaxed text-inherit">
46-
Material Tailwind is an easy to use components library for Tailwind CSS
47-
and Material Design. It provides a simple way to customize your
48-
components, you can change the colors, fonts, breakpoints and everything
49-
you need.
50-
</p>
44+
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
45+
The time is now for it to be okay to be great. For being a bright color.
46+
For standing out. Get ready to experience a new level of performance and functionality.
47+
</p>
5148
```
5249
</CodePreview>
5350

@@ -64,27 +61,77 @@ Organize and structure text to improve readability and accessibility with Materi
6461
component={<HTMLTypographyExamples.TypographyVariants/>}
6562
>
6663
```html
67-
<div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
68-
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-inherit">
69-
Material Tailwind
70-
</h1>
71-
<h2 class="block antialiased tracking-normal font-sans text-4xl font-semibold leading-[1.3] text-inherit">
72-
Material Tailwind
73-
</h2>
74-
<h3 class="block font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-inherit">
75-
Material Tailwind
76-
</h3>
77-
<h4 class="block font-sans text-2xl antialiased font-semibold leading-snug tracking-normal text-inherit">
78-
Material Tailwind
79-
</h4>
80-
<h5 class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-inherit">
81-
Material Tailwind
82-
</h5>
83-
<h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
84-
Material Tailwind
85-
</h6>
86-
87-
</div>
64+
<h1
65+
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"
66+
>
67+
H1 Get ready to experience a new level of performance and functionality.
68+
</h1>
69+
70+
<h1
71+
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"
72+
>
73+
H1 Get ready to experience a new level of performance and functionality.
74+
</h1>
75+
76+
<h2
77+
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"
78+
>
79+
H2 Get ready to experience a new level of performance and functionality.
80+
</h2>
81+
82+
<h2
83+
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"
84+
>
85+
H2 Get ready to experience a new level of performance and functionality.
86+
</h2>
87+
88+
<h3
89+
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"
90+
>
91+
H3 Get ready to experience a new level of performance and functionality.
92+
</h3>
93+
94+
<h3
95+
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"
96+
>
97+
H3 Get ready to experience a new level of performance and functionality.
98+
</h3>
99+
100+
<h4
101+
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"
102+
>
103+
H4 Get ready to experience a new level of performance and functionality.
104+
</h4>
105+
106+
<h4
107+
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"
108+
>
109+
H4 Get ready to experience a new level of performance and functionality.
110+
</h4>
111+
112+
<h5
113+
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"
114+
>
115+
H5 Get ready to experience a new level of performance and functionality.
116+
</h5>
117+
118+
<h5
119+
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"
120+
>
121+
H5 Get ready to experience a new level of performance and functionality.
122+
</h5>
123+
124+
<h6
125+
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"
126+
>
127+
H6 Get ready to experience a new level of performance and functionality.
128+
</h6>
129+
130+
<h6
131+
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"
132+
>
133+
H6 Get ready to experience a new level of performance and functionality.
134+
</h6>
88135
```
89136
</CodePreview>
90137

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

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

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

@@ -164,20 +208,18 @@ Implement different colors for your typography depending on the message you want
164208
component={<HTMLTypographyExamples.TypographyColors/>}
165209
>
166210
```html
167-
<div class="flex flex-col gap-8 text-left">
168-
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-blue-gray-900">
169-
Material Tailwind
170-
</h1>
171-
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-blue-500">
172-
Material Tailwind
173-
</h1>
174-
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-red-500">
175-
Material Tailwind
176-
</h1>
177-
<h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-green-500">
178-
Material Tailwind
179-
</h1>
180-
</div>
211+
<h1 class="font-bold leading-snug tracking-tight text-slate-800 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
212+
Material Tailwind
213+
</h1>
214+
<h1 class="font-bold leading-snug tracking-tight text-blue-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
215+
Material Tailwind
216+
</h1>
217+
<h1 class="font-bold leading-snug tracking-tight text-red-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
218+
Material Tailwind
219+
</h1>
220+
<h1 class="font-bold leading-snug tracking-tight text-green-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
221+
Material Tailwind
222+
</h1>
181223
```
182224
</CodePreview>
183225

@@ -194,9 +236,9 @@ You can implement gradient colors for your typography. See below how you can do
194236
component={<HTMLTypographyExamples.TypographyGradientColor/>}
195237
>
196238
```html
197-
<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">
198-
Material Tailwind
199-
</h1>
239+
<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">
240+
Material Tailwind
241+
</h1>
200242
```
201243
</CodePreview>
202244

0 commit comments

Comments
 (0)