From fe009a694fe4e8bfd305930989be01bc0b524576 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:00:50 +0300 Subject: [PATCH 1/7] Update card.mdx --- documentation/html/card.mdx | 122 +++++++++++++++++++++++++++++++++++- 1 file changed, 121 insertions(+), 1 deletion(-) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index 6665bec7c..2edcb2b31 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -6,6 +6,8 @@ navigation: "card", "simple-card", "card-with-link", + "card-with-header", + "card-with-footer", "profile-card", "login-card", "pricing-card", @@ -16,6 +18,8 @@ navigation: "horizontal-card", "ecommerce-card", "card-with-list", + "text-only-card", + "card-with-hover", "more-examples", "best-practices", ] @@ -34,7 +38,7 @@ See below our beautiful Tailwind CSS card examples that you can use in your web
-## Card Examples: +### Card Examples: ## Default Card @@ -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. @@ -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. + +} +> +```html +
+
+ + Header for the card + +
+
+
+ Website Review Check Text +
+

+ 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. +

+
+
+``` + + +--- + +## Card with Footer + +At the end of the card, add additional information that are as a secondary source of information. + +} +> +```html +
+
+
+ The key is to enjoy life +
+

+ 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. +

+
+
+ + Last updated: 4 hours ago + +
+
+``` + + +--- + ## 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. @@ -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 simple design for place where only a simple text, like description or title and description are needed. It features a simple typography of text and comfortable spacing. + +} +> +```html +
+
+
+ Website Review Check Text +
+

+ 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. +

+
+
+``` + + +--- + +## 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 a tag for linking to other pages, categories or blog posts. + +} +> +```html +
+
+
+ It’s important to shape up +
+

+ 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. +

+
+
+``` + + +--- + + ## Explore More Tailwind CSS Examples Check out more card component examples from Material Tailwind Blocks: From 28000373b0ddaae3766c69b70e94dfe74a21cb04 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:00:52 +0300 Subject: [PATCH 2/7] Create text-only-card.tsx --- docs-content/html/card/text-only-card.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 docs-content/html/card/text-only-card.tsx diff --git a/docs-content/html/card/text-only-card.tsx b/docs-content/html/card/text-only-card.tsx new file mode 100644 index 000000000..0cc527b64 --- /dev/null +++ b/docs-content/html/card/text-only-card.tsx @@ -0,0 +1,14 @@ +export function TextOnlyCard() { + return ( +
+
+
+ Website Review Check Text +
+

+ 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. +

+
+
+ ); +} From 28d80875cc9c47127b5034cba34d3e7cd5d64edd Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:00:54 +0300 Subject: [PATCH 3/7] Update index.ts --- docs-content/html/card/index.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs-content/html/card/index.ts b/docs-content/html/card/index.ts index c6eaf1db1..8a7111074 100644 --- a/docs-content/html/card/index.ts +++ b/docs-content/html/card/index.ts @@ -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"; From 16c28d1eedd1b47341afca778da46cfdd04ab6a0 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:00:56 +0300 Subject: [PATCH 4/7] Create card-with-hover.tsx --- docs-content/html/card/card-with-hover.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 docs-content/html/card/card-with-hover.tsx diff --git a/docs-content/html/card/card-with-hover.tsx b/docs-content/html/card/card-with-hover.tsx new file mode 100644 index 000000000..d4f24c1f2 --- /dev/null +++ b/docs-content/html/card/card-with-hover.tsx @@ -0,0 +1,14 @@ +export function CardWithHover() { + return ( +
+
+
+ It’s important to shape up +
+

+ 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. +

+
+
+ ); +} From b5ee24708e017d28b7109f7a5aba921d3b3ed13c Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:00:59 +0300 Subject: [PATCH 5/7] Create card-with-header.tsx --- docs-content/html/card/card-with-header.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs-content/html/card/card-with-header.tsx diff --git a/docs-content/html/card/card-with-header.tsx b/docs-content/html/card/card-with-header.tsx new file mode 100644 index 000000000..80d4d004c --- /dev/null +++ b/docs-content/html/card/card-with-header.tsx @@ -0,0 +1,19 @@ +export function CardWithHeader() { + return ( +
+
+ + Header for the card + +
+
+
+ Website Review Check Text +
+

+ 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. +

+
+
+ ); +} From 53b6d1498fad3a19ad10196f2d560b3557e29231 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:01:00 +0300 Subject: [PATCH 6/7] Create card-with-footer.tsx --- docs-content/html/card/card-with-footer.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs-content/html/card/card-with-footer.tsx diff --git a/docs-content/html/card/card-with-footer.tsx b/docs-content/html/card/card-with-footer.tsx new file mode 100644 index 000000000..243b3675d --- /dev/null +++ b/docs-content/html/card/card-with-footer.tsx @@ -0,0 +1,19 @@ +export function CardWithFooter() { + return ( +
+
+
+ The key is to enjoy life +
+

+ 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. +

+
+
+ + Last updated: 4 hours ago + +
+
+ ); +} From 2b0b2fda16593d287d97ee99f133ef0bd712ffa4 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 29 Aug 2024 18:02:53 +0300 Subject: [PATCH 7/7] Update card.mdx --- documentation/html/card.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index 2edcb2b31..97fa1d933 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -996,7 +996,7 @@ Use this card for e-commerce platforms, online stores, or product showcase page ## Text Only Card -Use this card example with simple design for place where only a simple text, like description or title and description are needed. It features a simple typography of text and comfortable spacing. +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.