Skip to content

Commit 97ff4c4

Browse files
marqbeniaminmarqbeniamin
authored
Merge pull request #818 from creativetimofficial/@material-tailwind/html-cards-seo
@Material tailwind/html cards seo
2 parents a482700 + 2b0b2fd commit 97ff4c4

File tree

6 files changed

+193
-3
lines changed

6 files changed

+193
-3
lines changed

‎docs-content/html/card/card-with-footer.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function CardWithFooter() {
2+
return (
3+
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
4+
<div className="p-4">
5+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
6+
The key is to enjoy life
7+
</h5>
8+
<p className="text-slate-600 leading-normal font-light">
9+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
10+
</p>
11+
</div>
12+
<div className="mx-3 border-t border-slate-200 pb-3 pt-2 px-1">
13+
<span className="text-sm text-slate-500">
14+
Last updated: 4 hours ago
15+
</span>
16+
</div>
17+
</div>
18+
);
19+
}

‎docs-content/html/card/card-with-header.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function CardWithHeader() {
2+
return (
3+
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
4+
<div className="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">
5+
<span className="text-sm text-slate-500">
6+
Header for the card
7+
</span>
8+
</div>
9+
<div className="p-4">
10+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
11+
Website Review Check Text
12+
</h5>
13+
<p className="text-slate-600 leading-normal font-light">
14+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
15+
</p>
16+
</div>
17+
</div>
18+
);
19+
}

‎docs-content/html/card/card-with-hover.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function CardWithHover() {
2+
return (
3+
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 hover:border-slate-300 hover:shadow-md rounded-lg transition-all cursor-pointer">
4+
<div className="p-4">
5+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
6+
It’s important to shape up
7+
</h5>
8+
<p className="text-slate-600 leading-normal font-light">
9+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
10+
</p>
11+
</div>
12+
</div>
13+
);
14+
}

‎docs-content/html/card/index.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
export * from "./card";
2+
export * from "./simple-card";
3+
export * from "./card-with-link";
4+
export * from "./card-with-header";
5+
export * from "./card-with-footer";
26
export * from "./background-blog-card";
37
export * from "./blog-card";
48
export * from "./booking-card";
5-
export * from "./card-with-link";
69
export * from "./ecommerce-card";
710
export * from "./horizontal-card";
811
export * from "./login-card";
912
export * from "./pricing-card";
1013
export * from "./profile-card";
11-
export * from "./simple-card";
1214
export * from "./testimonial-card";
1315
export * from "./card-with-list";
16+
export * from "./text-only-card";
17+
export * from "./card-with-hover";

‎docs-content/html/card/text-only-card.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function TextOnlyCard() {
2+
return (
3+
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
4+
<div className="p-4">
5+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
6+
Website Review Check Text
7+
</h5>
8+
<p className="text-slate-600 leading-normal font-light">
9+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
10+
</p>
11+
</div>
12+
</div>
13+
);
14+
}

‎documentation/html/card.mdx‎

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ navigation:
66
"card",
77
"simple-card",
88
"card-with-link",
9+
"card-with-header",
10+
"card-with-footer",
911
"profile-card",
1012
"login-card",
1113
"pricing-card",
@@ -16,6 +18,8 @@ navigation:
1618
"horizontal-card",
1719
"ecommerce-card",
1820
"card-with-list",
21+
"text-only-card",
22+
"card-with-hover",
1923
"more-examples",
2024
"best-practices",
2125
]
@@ -34,7 +38,7 @@ See below our beautiful Tailwind CSS card examples that you can use in your web
3438

3539
<br />
3640

37-
## Card Examples:
41+
### Card Examples:
3842

3943
## Default Card
4044

@@ -77,6 +81,7 @@ This versatile card component example contains an image, title, text, and button
7781

7882
---
7983

84+
8085
## Tailwind CSS Simple Card
8186

8287
Use this card example with clean design for article summaries, product/ service highlights, event descriptions, or user testimonials. It features a clear hierarchy of text, comfortable spacing, and a button for action.
@@ -161,6 +166,68 @@ The design elements such as the SVG icon, text content, and interactive button,
161166

162167
---
163168

169+
## Card with Header
170+
171+
You can always add additional information to a regular card. Usually these are secondary details about the main topic of the card.
172+
173+
<CodePreview
174+
id="card-with-header"
175+
link="card#card-with-header"
176+
className="mt-4"
177+
component={<HTMLCardExamples.CardWithHeader/>}
178+
>
179+
```html
180+
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
181+
<div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">
182+
<span class="text-sm text-slate-500">
183+
Header for the card
184+
</span>
185+
</div>
186+
<div class="p-4">
187+
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
188+
Website Review Check Text
189+
</h5>
190+
<p class="text-slate-600 leading-normal font-light">
191+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
192+
</p>
193+
</div>
194+
</div>
195+
```
196+
</CodePreview>
197+
198+
---
199+
200+
## Card with Footer
201+
202+
At the end of the card, add additional information that are as a secondary source of information.
203+
204+
<CodePreview
205+
id="card-with-footer"
206+
link="card#card-with-footer"
207+
className="mt-4"
208+
component={<HTMLCardExamples.CardWithFooter/>}
209+
>
210+
```html
211+
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
212+
<div class="p-4">
213+
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
214+
The key is to enjoy life
215+
</h5>
216+
<p class="text-slate-600 leading-normal font-light">
217+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
218+
</p>
219+
</div>
220+
<div class="mx-3 border-t border-slate-200 pb-3 pt-2 px-1">
221+
<span class="text-sm text-slate-500">
222+
Last updated: 4 hours ago
223+
</span>
224+
</div>
225+
</div>
226+
```
227+
</CodePreview>
228+
229+
---
230+
164231
## Tailwind CSS Profile Card
165232

166233
This card example is ideal for introducing individuals, such as team members, employees, or speakers at an event, on a company website, event page, or within an app.
@@ -927,6 +994,59 @@ Use this card for e-commerce platforms, online stores, or product showcase page
927994

928995
---
929996

997+
## Text Only Card
998+
999+
Use this card example with clean design for place where only a basic text, like description or title and description are needed. It features a light typography and comfortable spacing.
1000+
1001+
<CodePreview
1002+
id="text-only-card"
1003+
link="card#text-only-card"
1004+
className="mt-4"
1005+
component={<HTMLCardExamples.TextOnlyCard/>}
1006+
>
1007+
```html
1008+
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
1009+
<div class="p-4">
1010+
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
1011+
Website Review Check Text
1012+
</h5>
1013+
<p class="text-slate-600 leading-normal font-light">
1014+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
1015+
</p>
1016+
</div>
1017+
</div>
1018+
```
1019+
</CodePreview>
1020+
1021+
---
1022+
1023+
## Card with Hover Effect
1024+
1025+
Use this card example with simple design and a beautiful hover effect for places where you want the attention of the user to be focused. It is great in combination with an <code>a tag</code> for linking to other pages, categories or blog posts.
1026+
1027+
<CodePreview
1028+
id="card-with-hover"
1029+
link="card#card-with-hover"
1030+
className="mt-4"
1031+
component={<HTMLCardExamples.CardWithHover/>}
1032+
>
1033+
```html
1034+
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 hover:border-slate-300 hover:shadow-md rounded-lg transition-all cursor-pointer">
1035+
<div class="p-4">
1036+
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
1037+
It’s important to shape up
1038+
</h5>
1039+
<p class="text-slate-600 leading-normal font-light">
1040+
Surround yourself with angels. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it.
1041+
</p>
1042+
</div>
1043+
</div>
1044+
```
1045+
</CodePreview>
1046+
1047+
---
1048+
1049+
9301050
<span id="more-examples"></span>
9311051
## Explore More Tailwind CSS Examples
9321052
Check out more card component examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>:

0 commit comments

Comments
 (0)