From 805a972bf4186115e9a966c66e112d0f7cba50d0 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:27:06 +0300 Subject: [PATCH 01/15] Create card-with-tabs.tsx --- docs-content/html/card/card-with-tabs.tsx | 59 +++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 docs-content/html/card/card-with-tabs.tsx diff --git a/docs-content/html/card/card-with-tabs.tsx b/docs-content/html/card/card-with-tabs.tsx new file mode 100644 index 000000000..770ddaa54 --- /dev/null +++ b/docs-content/html/card/card-with-tabs.tsx @@ -0,0 +1,59 @@ +export function CardWithTabs() { + return ( +
+
+ + +
+
+
+ Website Review Check Text +
+

+ Because it's about motivating the doers. Because I'm + here to follow my dreams and inspire other people to follow their + dreams, too. +

+
+
+
+ The place is close to Barceloneta +
+

+ The reading of all good books is like a conversation with the + finest minds of past centuries. Follow my dreams and inspire other people. +

+
+
+
+ Close to Barceloneta +
+

+ Comparing yourself to others is the thief of joy. + The reading of all good books is like a conversation +

+
+
+
+
+ ); +} \ No newline at end of file From 3df90ac1f0508f6db47aa72e43263006cc4293df Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:27:08 +0300 Subject: [PATCH 02/15] Update index.ts --- docs-content/html/card/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-content/html/card/index.ts b/docs-content/html/card/index.ts index 5a78e0d70..a0a4c11a5 100644 --- a/docs-content/html/card/index.ts +++ b/docs-content/html/card/index.ts @@ -16,4 +16,5 @@ export * from "./profile-card"; export * from "./testimonial-card"; export * from "./card-with-list"; export * from "./text-only-card"; +export * from "./card-with-tabs"; export * from "./card-with-hover"; From 8706663c4e0d8a6e350ca5dbe77c53d3919d26f2 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:27:10 +0300 Subject: [PATCH 03/15] Update card.mdx --- documentation/html/card.mdx | 76 +++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index 2b9459390..217a4a8bc 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -22,6 +22,7 @@ navigation: "card-with-list", "text-only-card", "card-with-hover", + "card-with-tabs", "more-examples", "best-practices", ] @@ -1014,6 +1015,81 @@ Use this card example with clean design for place where only a basic text, like --- + + +## Card with Tabs + +This card example features multiple tabs with content; this allows users to switch between different sections within the same card. It's perfect for organizing related information in a compact space. + +Important: This example requires the Tabs Javascript to be included in the project. + +} +> +```html +
+
+ + +
+
+
+ Website Review Check Text +
+

+ Because it's about motivating the doers. Because I'm + here to follow my dreams and inspire other people to follow their + dreams, too. +

+
+ + +
+
+
+``` + + +--- + ## 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. From c05e0a05543be42ca43c301e1db1da34fddb1119 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:27:12 +0300 Subject: [PATCH 04/15] Update tabs.mdx --- documentation/html/tabs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/html/tabs.mdx b/documentation/html/tabs.mdx index f3469c73f..b61335776 100644 --- a/documentation/html/tabs.mdx +++ b/documentation/html/tabs.mdx @@ -204,7 +204,7 @@ The following data attributes are available for tabs. --- -## Required Scrips +## Required Scripts From c5ed33440fd009124f1e97bda941a5e34677196f Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:57:37 +0300 Subject: [PATCH 05/15] Update card.mdx --- documentation/html/card.mdx | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index 217a4a8bc..20aa80943 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -23,6 +23,7 @@ navigation: "text-only-card", "card-with-hover", "card-with-tabs", + "card-with-bottom-image", "more-examples", "best-practices", ] @@ -1019,7 +1020,9 @@ Use this card example with clean design for place where only a basic text, like ## Card with Tabs -This card example features multiple tabs with content; this allows users to switch between different sections within the same card. It's perfect for organizing related information in a compact space. +This card example features multiple tabs with content; this allows users to switch between +different sections within the same card. It's perfect for organizing related information in +a compact space. Important: This example requires the Tabs Javascript to be included in the project. @@ -1090,6 +1093,37 @@ This card example features multiple tabs with content; this allows users to swit --- +## Card with Bottom Image + +This card component contains the title, text, and an image at the bottom. It is a good example for displaying news, articles, or blog posts where you want the title to be the most important thing on the card. + + +} +> +```html +
+
+
+ Special News Article +
+

+ The place is close to Barceloneta Beach and bus stop just 2 min by walk + and near to "Naviglio" where you can enjoy the main night life in + Barcelona. +

+
+
+ card-image +
+
+``` + + +--- + ## 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. From 0c56827bbf196609d6b4c4bf3af97fc34e174621 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:57:39 +0300 Subject: [PATCH 06/15] Create card-with-bottom-image.tsx --- .../html/card/card-with-bottom-image.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs-content/html/card/card-with-bottom-image.tsx diff --git a/docs-content/html/card/card-with-bottom-image.tsx b/docs-content/html/card/card-with-bottom-image.tsx new file mode 100644 index 000000000..84e971c7e --- /dev/null +++ b/docs-content/html/card/card-with-bottom-image.tsx @@ -0,0 +1,19 @@ +export function CardWithBottomImage() { + return ( +
+
+
+ Special News Article +
+

+ The place is close to Barceloneta Beach and bus stop just 2 min by walk + and near to "Naviglio" where you can enjoy the main night life in + Barcelona. +

+
+
+ card-image +
+
+ ); +} From e4a8470071636b6193ccee8dc9b0d42d4b1192bc Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 15:57:42 +0300 Subject: [PATCH 07/15] Update index.ts --- docs-content/html/card/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-content/html/card/index.ts b/docs-content/html/card/index.ts index a0a4c11a5..0163c8f35 100644 --- a/docs-content/html/card/index.ts +++ b/docs-content/html/card/index.ts @@ -17,4 +17,5 @@ export * from "./testimonial-card"; export * from "./card-with-list"; export * from "./text-only-card"; export * from "./card-with-tabs"; +export * from "./card-with-bottom-image"; export * from "./card-with-hover"; From f93b4d128c00ec34c3c8fa9e551fb66f2e6d6ad3 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 16:31:37 +0300 Subject: [PATCH 08/15] Create card-with-animation.tsx --- .../html/card/card-with-animation.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs-content/html/card/card-with-animation.tsx diff --git a/docs-content/html/card/card-with-animation.tsx b/docs-content/html/card/card-with-animation.tsx new file mode 100644 index 000000000..95df7d849 --- /dev/null +++ b/docs-content/html/card/card-with-animation.tsx @@ -0,0 +1,24 @@ +export function CardWithAnimation() { + return ( +
+
+ investment-seed-round +
+
+
+ Successful Seed Round +
+

+ We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion. +

+
+
+ +
+
+ + ); +} From 797b0862d4f604821fc573cf8dca29c5af1e9463 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 16:31:42 +0300 Subject: [PATCH 09/15] Update index.ts --- docs-content/html/card/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-content/html/card/index.ts b/docs-content/html/card/index.ts index 0163c8f35..942f1c604 100644 --- a/docs-content/html/card/index.ts +++ b/docs-content/html/card/index.ts @@ -18,4 +18,5 @@ export * from "./card-with-list"; export * from "./text-only-card"; export * from "./card-with-tabs"; export * from "./card-with-bottom-image"; +export * from "./card-with-animation"; export * from "./card-with-hover"; From f5b8fd7baea852ea0decb2f7530264a10474a913 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 16:31:45 +0300 Subject: [PATCH 10/15] Update card.mdx --- documentation/html/card.mdx | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index 20aa80943..d2cc900fa 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -24,6 +24,7 @@ navigation: "card-with-hover", "card-with-tabs", "card-with-bottom-image", + "card-with-animation", "more-examples", "best-practices", ] @@ -1124,6 +1125,38 @@ This card component contains the title, text, and an image at the bottom. It is --- +## Card with Animation + +On this example we added a hover effect to the card. When you hover over the card, the image will zoom using cubic bezier animation and also the card shadow will change. + +} +> +```html +
+
+ investment-seed-round +
+
+
+ Successful Seed Round +
+

+ We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion. +

+
+
+ +
+
+ +--- + ## 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. From e941dee8d4f1ab8850ce69a7828bef801db2582e Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 16:50:18 +0300 Subject: [PATCH 11/15] Update card.mdx --- documentation/html/card.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index d2cc900fa..888295d2b 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -21,10 +21,10 @@ navigation: "ecommerce-card", "card-with-list", "text-only-card", - "card-with-hover", "card-with-tabs", "card-with-bottom-image", "card-with-animation", + "card-with-hover", "more-examples", "best-practices", ] @@ -1154,6 +1154,8 @@ On this example we added a hover effect to the card. When you hover over the car +``` + --- From f833eed43748dd64160c34081f510d70c0170ea6 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 18:37:55 +0300 Subject: [PATCH 12/15] Create card-with-alert.tsx --- docs-content/html/card/card-with-alert.tsx | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 docs-content/html/card/card-with-alert.tsx diff --git a/docs-content/html/card/card-with-alert.tsx b/docs-content/html/card/card-with-alert.tsx new file mode 100644 index 000000000..281061996 --- /dev/null +++ b/docs-content/html/card/card-with-alert.tsx @@ -0,0 +1,39 @@ +export function CardWithAlert() { + return ( +
+
+ + + + Please update your card details. + +
+
+
+ + + +
+ Custom CMS for startup +
+
+

+ Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. +

+ +
+
+ + ); +} From cefcf1efa32fb6a90ada1a57a886253ae03ac68f Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 18:38:01 +0300 Subject: [PATCH 13/15] Create card-with-centered-content.tsx --- .../html/card/card-with-centered-content.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs-content/html/card/card-with-centered-content.tsx diff --git a/docs-content/html/card/card-with-centered-content.tsx b/docs-content/html/card/card-with-centered-content.tsx new file mode 100644 index 000000000..f00d9e053 --- /dev/null +++ b/docs-content/html/card/card-with-centered-content.tsx @@ -0,0 +1,29 @@ +export function CardWithCenteredContent() { + return ( +
+
+
+ + + + + +
+
+
+ Lit Ideas for Startups +
+
+

+ Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. +

+
+ +
+
+
+ + ); +} From 9b181f4e6fac8c2696949ff1b4c886153a3e9618 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 18:38:04 +0300 Subject: [PATCH 14/15] Update index.ts --- docs-content/html/card/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs-content/html/card/index.ts b/docs-content/html/card/index.ts index 942f1c604..1734b8e8d 100644 --- a/docs-content/html/card/index.ts +++ b/docs-content/html/card/index.ts @@ -19,4 +19,6 @@ export * from "./text-only-card"; export * from "./card-with-tabs"; export * from "./card-with-bottom-image"; export * from "./card-with-animation"; +export * from "./card-with-alert"; +export * from "./card-with-centered-content"; export * from "./card-with-hover"; From 39becea3312792eb8ea1d42c3651309938417a52 Mon Sep 17 00:00:00 2001 From: Alexandru Paduraru Date: Thu, 12 Sep 2024 18:38:13 +0300 Subject: [PATCH 15/15] Update card.mdx --- documentation/html/card.mdx | 91 +++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) diff --git a/documentation/html/card.mdx b/documentation/html/card.mdx index 888295d2b..df5097fd4 100644 --- a/documentation/html/card.mdx +++ b/documentation/html/card.mdx @@ -24,6 +24,8 @@ navigation: "card-with-tabs", "card-with-bottom-image", "card-with-animation", + "card-with-alert", + "card-with-centered-content", "card-with-hover", "more-examples", "best-practices", @@ -1159,6 +1161,95 @@ On this example we added a hover effect to the card. When you hover over the car --- +## Card with Alert + +Card with alert is a card that contains a message that is displayed at the top of the card. It is useful for displaying important information that the user needs to know. + +} +> +```html +
+
+ + + + Please update your card details. + +
+
+
+ + + +
+ Custom CMS for startup +
+
+

+ Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. +

+ +
+
+``` + + +--- + +## Card with Centered Content + +Card with centered content is a card that contains all the details encapsulated in the middle of the card. +It is useful for displaying contextually important information that the user needs to know. The card is taking more space than the other cards. + +} +> +```html +
+
+
+ + + + +
+
+
+ Lit Ideas for Startups +
+
+

+ Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. +

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