Skip to content

Commit

Permalink
Merge pull request #818 from creativetimofficial/@material-tailwind/h…
Browse files Browse the repository at this point in the history
…tml-cards-seo

@Material tailwind/html cards seo
  • Loading branch information
marqbeniamin authored Aug 29, 2024
2 parents a482700 + 2b0b2fd commit 97ff4c4
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 3 deletions.
19 changes: 19 additions & 0 deletions docs-content/html/card/card-with-footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export function CardWithFooter() {
return (
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
<div className="p-4">
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
The key is to enjoy life
</h5>
<p className="text-slate-600 leading-normal font-light">
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.
</p>
</div>
<div className="mx-3 border-t border-slate-200 pb-3 pt-2 px-1">
<span className="text-sm text-slate-500">
Last updated: 4 hours ago
</span>
</div>
</div>
);
}
19 changes: 19 additions & 0 deletions docs-content/html/card/card-with-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export function CardWithHeader() {
return (
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
<div className="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">
<span className="text-sm text-slate-500">
Header for the card
</span>
</div>
<div className="p-4">
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
Website Review Check Text
</h5>
<p className="text-slate-600 leading-normal font-light">
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.
</p>
</div>
</div>
);
}
14 changes: 14 additions & 0 deletions docs-content/html/card/card-with-hover.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export function CardWithHover() {
return (
<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">
<div className="p-4">
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
It’s important to shape up
</h5>
<p className="text-slate-600 leading-normal font-light">
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.
</p>
</div>
</div>
);
}
8 changes: 6 additions & 2 deletions docs-content/html/card/index.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
export * from "./card";
export * from "./simple-card";
export * from "./card-with-link";
export * from "./card-with-header";
export * from "./card-with-footer";
export * from "./background-blog-card";
export * from "./blog-card";
export * from "./booking-card";
export * from "./card-with-link";
export * from "./ecommerce-card";
export * from "./horizontal-card";
export * from "./login-card";
export * from "./pricing-card";
export * from "./profile-card";
export * from "./simple-card";
export * from "./testimonial-card";
export * from "./card-with-list";
export * from "./text-only-card";
export * from "./card-with-hover";
14 changes: 14 additions & 0 deletions docs-content/html/card/text-only-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export function TextOnlyCard() {
return (
<div className="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
<div className="p-4">
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
Website Review Check Text
</h5>
<p className="text-slate-600 leading-normal font-light">
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.
</p>
</div>
</div>
);
}
122 changes: 121 additions & 1 deletion documentation/html/card.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ navigation:
"card",
"simple-card",
"card-with-link",
"card-with-header",
"card-with-footer",
"profile-card",
"login-card",
"pricing-card",
Expand All @@ -16,6 +18,8 @@ navigation:
"horizontal-card",
"ecommerce-card",
"card-with-list",
"text-only-card",
"card-with-hover",
"more-examples",
"best-practices",
]
Expand All @@ -34,7 +38,7 @@ See below our beautiful Tailwind CSS card examples that you can use in your web

<br />

## Card Examples:
### Card Examples:

## Default Card

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

---


## Tailwind CSS Simple Card

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.
Expand Down Expand Up @@ -161,6 +166,68 @@ The design elements such as the SVG icon, text content, and interactive button,

---

## Card with Header

You can always add additional information to a regular card. Usually these are secondary details about the main topic of the card.

<CodePreview
id="card-with-header"
link="card#card-with-header"
className="mt-4"
component={<HTMLCardExamples.CardWithHeader/>}
>
```html
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
<div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">
<span class="text-sm text-slate-500">
Header for the card
</span>
</div>
<div class="p-4">
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
Website Review Check Text
</h5>
<p class="text-slate-600 leading-normal font-light">
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.
</p>
</div>
</div>
```
</CodePreview>

---

## Card with Footer

At the end of the card, add additional information that are as a secondary source of information.

<CodePreview
id="card-with-footer"
link="card#card-with-footer"
className="mt-4"
component={<HTMLCardExamples.CardWithFooter/>}
>
```html
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
<div class="p-4">
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
The key is to enjoy life
</h5>
<p class="text-slate-600 leading-normal font-light">
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.
</p>
</div>
<div class="mx-3 border-t border-slate-200 pb-3 pt-2 px-1">
<span class="text-sm text-slate-500">
Last updated: 4 hours ago
</span>
</div>
</div>
```
</CodePreview>

---

## Tailwind CSS Profile Card

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.
Expand Down Expand Up @@ -927,6 +994,59 @@ Use this card for e-commerce platforms, online stores, or product showcase page

---

## Text Only Card

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.

<CodePreview
id="text-only-card"
link="card#text-only-card"
className="mt-4"
component={<HTMLCardExamples.TextOnlyCard/>}
>
```html
<div class="relative flex flex-col mt-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
<div class="p-4">
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
Website Review Check Text
</h5>
<p class="text-slate-600 leading-normal font-light">
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.
</p>
</div>
</div>
```
</CodePreview>

---

## Card with Hover Effect

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.

<CodePreview
id="card-with-hover"
link="card#card-with-hover"
className="mt-4"
component={<HTMLCardExamples.CardWithHover/>}
>
```html
<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">
<div class="p-4">
<h5 class="mb-2 text-slate-800 text-xl font-semibold">
It’s important to shape up
</h5>
<p class="text-slate-600 leading-normal font-light">
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.
</p>
</div>
</div>
```
</CodePreview>

---


<span id="more-examples"></span>
## Explore More Tailwind CSS Examples
Check out more card component examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>:
Expand Down

0 comments on commit 97ff4c4

Please sign in to comment.