From cabd5ce16192b0d5506e2067d370ef2646628881 Mon Sep 17 00:00:00 2001 From: Anand-Theertha Date: Mon, 18 Nov 2024 14:48:31 +0000 Subject: [PATCH 1/3] New: Sistent Card Component + lint fixes Signed-off-by: Anand-Theertha --- src/components/SistentNavigation/content.js | 17 +- .../projects/sistent/components/card/code.js | 8 + .../sistent/components/card/guidance.js | 8 + .../projects/sistent/components/card/index.js | 8 + .../Projects/Sistent/components/card/code.js | 267 ++++++++++++++++++ .../Sistent/components/card/guidance.js | 212 ++++++++++++++ .../Projects/Sistent/components/card/index.js | 194 +++++++++++++ .../Projects/Sistent/components/index.js | 7 + 8 files changed, 720 insertions(+), 1 deletion(-) create mode 100644 src/pages/projects/sistent/components/card/code.js create mode 100644 src/pages/projects/sistent/components/card/guidance.js create mode 100644 src/pages/projects/sistent/components/card/index.js create mode 100644 src/sections/Projects/Sistent/components/card/code.js create mode 100644 src/sections/Projects/Sistent/components/card/guidance.js create mode 100644 src/sections/Projects/Sistent/components/card/index.js diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 1932e1dc9356..e9f229f02bc5 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -87,5 +87,20 @@ export const content = [ id: 23, link: "/projects/sistent/components/text-field/code", text: "Text Field", - } + }, + { + id: 24, + link: "/projects/sistent/components/card", + text: "Card", + }, + { + id: 25, + link: "/projects/sistent/components/card/guidance", + text: "Card", + }, + { + id: 26, + link: "/projects/sistent/components/card/code", + text: "Card", + }, ]; diff --git a/src/pages/projects/sistent/components/card/code.js b/src/pages/projects/sistent/components/card/code.js new file mode 100644 index 000000000000..1025e05a0dd0 --- /dev/null +++ b/src/pages/projects/sistent/components/card/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { CardCode } from "../../../../../sections/Projects/Sistent/components/card/code"; + +const CardCodePage = () => { + return ; +}; + +export default CardCodePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/card/guidance.js b/src/pages/projects/sistent/components/card/guidance.js new file mode 100644 index 000000000000..1e3e51fbcfee --- /dev/null +++ b/src/pages/projects/sistent/components/card/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { CardGuidance } from "../../../../../sections/Projects/Sistent/components/card/guidance"; + +const CardGuidancePage = () => { + return ; +}; + +export default CardGuidancePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/card/index.js b/src/pages/projects/sistent/components/card/index.js new file mode 100644 index 000000000000..55e74d263187 --- /dev/null +++ b/src/pages/projects/sistent/components/card/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentCard from "../../../../../sections/Projects/Sistent/components/card"; + +const SistentCardPage = () => { + return ; +}; + +export default SistentCardPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/card/code.js b/src/sections/Projects/Sistent/components/card/code.js new file mode 100644 index 000000000000..7a96fec2abf0 --- /dev/null +++ b/src/sections/Projects/Sistent/components/card/code.js @@ -0,0 +1,267 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button } from "@layer5/sistent"; +import { CodeBlock } from "../button/code-block"; +import { SistentLayout } from "../../sistent-layout"; + +import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp"; +import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + `const cardOutlined = ( + + + + Company Spotlight + + + Layer5 + + Platform + + Empowering engineers with cloud-native management solutions. + + + + + + + ); + + + {cardOutlined} + `, + + `const cardMainAction1 = ( + + + + + + Meshery + + + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + + + + + ); + + + {cardMainAction1} + `, + + ` + const cardMainAction2 = ( + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. + + + + + + + + ); + + + {cardMainAction2} + + `, +]; + +export const CardCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + const cardOutlined = ( + + + + Company Spotlight + + + Layer5 + + Platform + + Empowering engineers with cloud-native management solutions. + + + + + + + ); + + const cardMainAction1 = ( + + + + + + Meshery + + + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + + + + + ); + + const cardMainAction2 = ( + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. + + + + + + + + ); + + return ( + +
+ +

Card

+ +

The Card component is a UI element used to encapsulate information or actions related to a single topic, + typically in a visually separated, easily digestible format. It often includes elements like images, text, + and buttons to present content and enable quick interactions without navigating away from the card.

+
+ navigate("/projects/sistent/components/card")} + title="Overview" + /> + + navigate("/projects/sistent/components/card/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/card/code") + } + title="Code" + /> +
+
+

+ A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, + navigating to another screen, or activating some other behavior. +

+ +

Oultined Card Example

+ +

+ An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. + Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. +

+
+
+ + {cardOutlined} + +
+ +
+ +
+ +

Main Action Cards

+ +

+ This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. + For example, ont the website, users can tap anywhere on the card to open the full product page. +

+
+
+ + {cardMainAction1} + +
+ +
+
+

+ Cards can also include secondary actions, which should be positioned away + from the primary action area to avoid unintentional interaction conflicts. +

+
+
+ + {cardMainAction2} + +
+ +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/card/guidance.js b/src/sections/Projects/Sistent/components/card/guidance.js new file mode 100644 index 000000000000..2bb785578f13 --- /dev/null +++ b/src/sections/Projects/Sistent/components/card/guidance.js @@ -0,0 +1,212 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp"; +import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const CardGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + const cardOutlined = ( + + + + Company Spotlight + + + Layer5 + + Platform + + Empowering engineers with cloud-native management solutions. + + + + + + + ); + + const cardMainAction1 = ( + + + + + + Meshery + + + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + + + + + ); + + const cardMainAction2 = ( + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. + + + + + + + + ); + + return ( + +
+ +

Card

+ +

+ The Card component is a UI element used to encapsulate information or actions related to a single topic, + typically in a visually separated, easily digestible format. It often includes elements like images, text, + and buttons to present content and enable quick interactions without navigating away from the card. +

+
+ navigate("/projects/sistent/components/card")} + title="Overview" + /> + + navigate("/projects/sistent/components/card/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/card/code") + } + title="Code" + /> +
+
+

+ For proper application, these cards can be used for different purposes to enable easier and consistent combination when guiding users across digital experiences. +

+ + +

Function

+ + +

The Card Component serves various functions:

+ +

Oultined Card

+

+ Outlined cards are ideal for use in layouts that benefit from a subtle, modern look, such as in settings with light backgrounds where visual clarity is important. + They’re perfect for showcasing items like product listings, profiles, or dashboard summaries, as the minimal border keeps the focus on the content without adding + visual weight. +

+ + + {cardOutlined} + + + +

Main Action Cards

+

+ This type of interactive card is well-suited for use in applications where quick access to more information + or actions is important, such as dashboards, or product catalogs. + For example, ont the website, users can tap anywhere on the card to open the full product page. +

+ + + {cardMainAction1} + + + +

+ In usage, cards can incorporate secondary actions, like sharing, bookmarking, or viewing additional details, + which are typically placed separately from the main action area. This separation prevents accidental taps or clicks, + allowing users to clearly distinguish between the primary function of the card (like opening a detailed view) and other supporting actions. +

+ + + {cardMainAction2} + + + + +

Labeling

+ +

+ For card components, clear labeling helps define the purpose and hierarchy of each card, + making it easier for users to understand the content at a glance. + Labels, like titles or category tags, can indicate the main topic or action associated with each card, + improving navigation and usability within a grid of multiple cards. +

+ +

Hierarchy and Visual Cues

+

+ Cards benefit from a clear hierarchy, using typography, spacing, and color to guide users through the content. + For instance, a card title in bold or larger text immediately draws attention, while secondary information is displayed + with subdued colors. +

+ +

Interactivity and Feedback

+

+ Cards often use hover effects, shadow adjustments, or subtle animations to indicate interactivity. + This feedback helps users identify clickable areas or interactive elements within the card, providing + a more engaging experience. +

+ +

Consistency in Style and Layout

+

+ Cards should maintain a consistent style throughout an interface to ensure a unified look and feel. + Consistency in aspects like font sizes, padding, border radii, and color schemes helps cards blend naturally + into the overall UI design, improving readability and making interactions feel intuitive across + different screens or sections. +

+ +
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/card/index.js b/src/sections/Projects/Sistent/components/card/index.js new file mode 100644 index 000000000000..62d7e5fac99b --- /dev/null +++ b/src/sections/Projects/Sistent/components/card/index.js @@ -0,0 +1,194 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp" +import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png" + +import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button} from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentCard = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + const bull = ( + + • + + ); + + const cardOutlined = ( + + + + Company Spotlight + + + Layer5 + + Platform + + Empowering engineers with cloud-native management solutions. + + + + + + + ); + + const cardMainAction1 = ( + + + + + + Meshery + + + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + + + + + ); + + const cardMainAction2 = ( + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. + + + + + + + + ); + + + return ( + +
+ +

Card

+ +

The Card component is a UI element used to encapsulate information or actions related to a single topic, + typically in a visually separated, easily digestible format. It often includes elements like images, text, + and buttons to present content and enable quick interactions without navigating away from the card. +

+
+ navigate("/projects/sistent/components/card")} + title="Overview" + /> + + navigate("/projects/sistent/components/card/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/card/code") + } + title="Code" + /> +
+
+

+ The card component is a versatile UI element commonly used in web and mobile applications. + It's designed to showcase content in a clean, concise, and visually organized manner. + Typically, a card groups related information, making it easy for users to digest and interact with. + It often includes an image or icon, title, description, and actionable buttons or links, all contained + within a defined boundary that makes it visually distinct. +

+ +

Types of Cards

+ +

+

+

Outlined

+

+ An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. + Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. +

+ + + {cardOutlined} + + + +

Main Action

+

+ 1. A card often lets users interact with its entire surface to trigger its main function, + whether it’s expanding, navigating to another screen, or activating some other behavior. +

+ + + {cardMainAction1} + + + +

+ 2. Cards can also include secondary actions, which should be positioned away + from the primary action area to avoid unintentional interaction conflicts. +

+ + + {cardMainAction2} + + + +

NOTE: + Cards may offer multiple actions, UI elements, and an overflow menu, + but it’s important to exercise restraint, as they are primarily designed to serve + as entry points to deeper and more comprehensive content.

+
+
+ + ); +}; + +export default SistentCard; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 7814f6ed237a..93b289d7e121 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -65,6 +65,13 @@ const componentsData = [ "Containers align and center content, providing responsive layout options for different screen sizes.", url: "/projects/sistent/components/container", }, + { + id: 9, + name: "Card", + description: + "Cards are surfaces that showcase content and actions centered around a specific topic.", + url: "/projects/sistent/components/card", + }, ]; const SistentComponents = () => { From dd5e51debaaa904d82dec9de804a2040805e00a6 Mon Sep 17 00:00:00 2001 From: Anand-Theertha Date: Mon, 18 Nov 2024 14:49:28 +0000 Subject: [PATCH 2/3] New: Sistent Card Component + lint fixes Signed-off-by: Anand-Theertha --- .../Projects/Sistent/components/card/code.js | 24 ++++------- .../Sistent/components/card/guidance.js | 33 ++++----------- .../Projects/Sistent/components/card/index.js | 41 +++++++------------ 3 files changed, 31 insertions(+), 67 deletions(-) diff --git a/src/sections/Projects/Sistent/components/card/code.js b/src/sections/Projects/Sistent/components/card/code.js index 7a96fec2abf0..f3c39b41f70c 100644 --- a/src/sections/Projects/Sistent/components/card/code.js +++ b/src/sections/Projects/Sistent/components/card/code.js @@ -133,7 +133,7 @@ export const CardCode = () => { Meshery - Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. @@ -172,9 +172,7 @@ export const CardCode = () => {

Card

 -

The Card component is a UI element used to encapsulate information or actions related to a single topic, - typically in a visually separated, easily digestible format. It often includes elements like images, text, - and buttons to present content and enable quick interactions without navigating away from the card.

+

The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated, easily digestible format. It often includes elements like images, text, and buttons to present content and enable quick interactions without navigating away from the card.

{

- A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, - navigating to another screen, or activating some other behavior. + A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, navigating to another screen, or activating some other behavior.

Oultined Card Example

- An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. - Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. + An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance.

@@ -236,21 +232,19 @@ export const CardCode = () => {

Main Action Cards

- This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. - For example, ont the website, users can tap anywhere on the card to open the full product page. + This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. For example, ont the website, users can tap anywhere on the card to open the full product page.

- - {cardMainAction1} - + + {cardMainAction1} +

- Cards can also include secondary actions, which should be positioned away - from the primary action area to avoid unintentional interaction conflicts. + Cards can also include secondary actions, which should be positioned away from the primary action area to avoid unintentional interaction conflicts.

diff --git a/src/sections/Projects/Sistent/components/card/guidance.js b/src/sections/Projects/Sistent/components/card/guidance.js index 2bb785578f13..479947bcffce 100644 --- a/src/sections/Projects/Sistent/components/card/guidance.js +++ b/src/sections/Projects/Sistent/components/card/guidance.js @@ -48,7 +48,7 @@ export const CardGuidance = () => { Meshery - Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. @@ -140,10 +140,7 @@ export const CardGuidance = () => {

Oultined Card

- Outlined cards are ideal for use in layouts that benefit from a subtle, modern look, such as in settings with light backgrounds where visual clarity is important. - They’re perfect for showcasing items like product listings, profiles, or dashboard summaries, as the minimal border keeps the focus on the content without adding - visual weight. -

+ Outlined cards are ideal for use in layouts that benefit from a subtle, modern look, such as in settings with light backgrounds where visual clarity is important. They’re perfect for showcasing items like product listings, profiles, or dashboard summaries, as the minimal border keeps the focus on the content without adding visual weight.

{cardOutlined} @@ -152,9 +149,7 @@ export const CardGuidance = () => {

Main Action Cards

- This type of interactive card is well-suited for use in applications where quick access to more information - or actions is important, such as dashboards, or product catalogs. - For example, ont the website, users can tap anywhere on the card to open the full product page. + This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. For example, ont the website, users can tap anywhere on the card to open the full product page.

@@ -163,9 +158,7 @@ export const CardGuidance = () => {

- In usage, cards can incorporate secondary actions, like sharing, bookmarking, or viewing additional details, - which are typically placed separately from the main action area. This separation prevents accidental taps or clicks, - allowing users to clearly distinguish between the primary function of the card (like opening a detailed view) and other supporting actions. + In usage, cards can incorporate secondary actions, like sharing, bookmarking, or viewing additional details, which are typically placed separately from the main action area. This separation prevents accidental taps or clicks, allowing users to clearly distinguish between the primary function of the card (like opening a detailed view) and other supporting actions.

@@ -177,32 +170,22 @@ export const CardGuidance = () => {

Labeling

- For card components, clear labeling helps define the purpose and hierarchy of each card, - making it easier for users to understand the content at a glance. - Labels, like titles or category tags, can indicate the main topic or action associated with each card, - improving navigation and usability within a grid of multiple cards. + For card components, clear labeling helps define the purpose and hierarchy of each card, making it easier for users to understand the content at a glance. Labels, like titles or category tags, can indicate the main topic or action associated with each card, improving navigation and usability within a grid of multiple cards.

Hierarchy and Visual Cues

- Cards benefit from a clear hierarchy, using typography, spacing, and color to guide users through the content. - For instance, a card title in bold or larger text immediately draws attention, while secondary information is displayed - with subdued colors. + Cards benefit from a clear hierarchy, using typography, spacing, and color to guide users through the content. For instance, a card title in bold or larger text immediately draws attention, while secondary information is displayed with subdued colors.

Interactivity and Feedback

- Cards often use hover effects, shadow adjustments, or subtle animations to indicate interactivity. - This feedback helps users identify clickable areas or interactive elements within the card, providing - a more engaging experience. + Cards often use hover effects, shadow adjustments, or subtle animations to indicate interactivity. This feedback helps users identify clickable areas or interactive elements within the card, providing a more engaging experience.

Consistency in Style and Layout

- Cards should maintain a consistent style throughout an interface to ensure a unified look and feel. - Consistency in aspects like font sizes, padding, border radii, and color schemes helps cards blend naturally - into the overall UI design, improving readability and making interactions feel intuitive across - different screens or sections. + Cards should maintain a consistent style throughout an interface to ensure a unified look and feel. Consistency in aspects like font sizes, padding, border radii, and color schemes helps cards blend naturally into the overall UI design, improving readability and making interactions feel intuitive across different screens or sections.

diff --git a/src/sections/Projects/Sistent/components/card/index.js b/src/sections/Projects/Sistent/components/card/index.js index 62d7e5fac99b..90cf07b6fad4 100644 --- a/src/sections/Projects/Sistent/components/card/index.js +++ b/src/sections/Projects/Sistent/components/card/index.js @@ -1,10 +1,10 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp" -import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png" +import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp"; +import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png"; -import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button} from "@layer5/sistent"; +import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button } from "@layer5/sistent"; import TabButton from "../../../../../reusecore/Button"; import { SistentLayout } from "../../sistent-layout"; import { Row } from "../../../../../reusecore/Layout"; @@ -57,7 +57,7 @@ const SistentCard = () => { Meshery - Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. + Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. @@ -69,7 +69,7 @@ const SistentCard = () => { @@ -89,17 +89,14 @@ const SistentCard = () => { ); - - return (

Card

 -

The Card component is a UI element used to encapsulate information or actions related to a single topic, - typically in a visually separated, easily digestible format. It often includes elements like images, text, - and buttons to present content and enable quick interactions without navigating away from the card. +

The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated, easily digestible format. It often includes elements like images, text, and buttons to present content and enable quick interactions without navigating away from the card. +

{

- The card component is a versatile UI element commonly used in web and mobile applications. - It's designed to showcase content in a clean, concise, and visually organized manner. - Typically, a card groups related information, making it easy for users to digest and interact with. - It often includes an image or icon, title, description, and actionable buttons or links, all contained - within a defined boundary that makes it visually distinct. + The card component is a versatile UI element commonly used in web and mobile applications. It's designed to showcase content in a clean, concise, and visually organized manner. Typically, a card groups related information, making it easy for users to digest and interact with. It often includes an image or icon, title, description, and actionable buttons or links, all contained within a defined boundary that makes it visually distinct.

Types of Cards

@@ -151,8 +144,7 @@ const SistentCard = () => {

Outlined

- An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. - Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. + An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance.

@@ -161,10 +153,7 @@ const SistentCard = () => {

Main Action

-

- 1. A card often lets users interact with its entire surface to trigger its main function, - whether it’s expanding, navigating to another screen, or activating some other behavior. -

+

1. A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, navigating to another screen, or activating some other behavior.

{cardMainAction1} @@ -172,8 +161,7 @@ const SistentCard = () => {

- 2. Cards can also include secondary actions, which should be positioned away - from the primary action area to avoid unintentional interaction conflicts. + 2. Cards can also include secondary actions, which should be positioned away from the primary action area to avoid unintentional interaction conflicts.

@@ -181,10 +169,9 @@ const SistentCard = () => { -

NOTE: - Cards may offer multiple actions, UI elements, and an overflow menu, - but it’s important to exercise restraint, as they are primarily designed to serve - as entry points to deeper and more comprehensive content.

+

+ NOTE: Cards may offer multiple actions, UI elements, and an overflow menu, but it’s important to exercise restraint, as they are primarily designed to serve as entry points to deeper and more comprehensive content. +

From 8fafebcdd4cbf4d15bea52685857444bba4ca0c4 Mon Sep 17 00:00:00 2001 From: Anand-Theertha Date: Wed, 20 Nov 2024 13:47:50 +0000 Subject: [PATCH 3/3] lint error Signed-off-by: Anand-Theertha --- src/components/SistentNavigation/content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 44cdce45fbf6..bc2466cee762 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -118,5 +118,5 @@ export const content = [ id: 29, link: "/projects/sistent/components/card/code", text: "Card", - } + } ];