Merge branch 'main' into VIV-2084-banner

apps/docs/content/_data/components.json

@@ -130,8 +130,13 @@
 	},
 	{
 		"title": "Card",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/card/README.md"
+		"description": "A card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card",
+		"variations": "./libs/components/src/lib/card/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/card/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/card/README.md",
+		"accessibility": "./libs/components/src/lib/card/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/card/USE-CASES.md"
 	},
 	{
 		"title": "Text Field",

libs/components/src/lib/card/ACCESSIBILITY.md

@@ -0,0 +1,12 @@
+## Best Practices
+
+### Slotted Content
+
+Make sure all the slotted content is accessible like:
+
+- images slotted in graphic slot should have an alt-text of an empty alt-text if they are not adding information.
+- button with icon-only should have aria-label
+
+## Resources
+
+- [Vivid Card: Manual accessibility test](https://docs.google.com/spreadsheets/d/18zOBlJWoow3yM3gQ-LfY0HUGsiK-BzhUY3ttfMiNJNo/edit?gid=1175911860#gid=1175911860)

libs/components/src/lib/card/GUIDELINES.md

@@ -0,0 +1,113 @@
+## Advantages of Card UI Design
+
+Advantages of card UI design
+
+### Highly Responsive
+
+Probably the main advantage of UI cards is that they are very adaptive. It’s the rectangular shape that makes them transformative. That is why UI cards look good on all screen sizes.
+
+### Easy-To-Understand
+
+UI cards are rather minimalistic and understandable design elements. Small chunks of information they reveal are easy to consume.
+
+### Intuitive and UX Friendly
+
+Most users are familiar with the card interface design and can easily navigate through it. Rectangular shape and simple clickable elements make the user experience very intuitive.
+
+### Attractive and Modern-Looking
+
+Despite the fact that card-based design has been around for a decade now it is still an up-to-date design solution. Their key visual element makes it easy to make any product attractive using this layout.
+
+## Appearance
+
+### Elevated
+
+<docs-do-dont no-gutters>
+
+<div slot="description">
+
+- default appearance
+- can change the elevation to emphasis
+</div>
+<div>
+
+```html preview center example 150px
+<vwc-card elevation="12" headline="Card with Elevation 12"></vwc-card>
+```
+
+</div>
+</docs-do-dont>
+
+### Outlined
+
+<docs-do-dont no-gutters>
+
+<div slot="description">
+
+</div>
+<div>
+
+```html preview center example 150px
+<vwc-card
+	appearance="outlined"
+	headline="Card with Outlined Appearance"
+	class="card-appearance"
+></vwc-card>
+
+<style>
+	.card-appearance {
+		margin: 16px;
+	}
+</style>
+```
+
+</div>
+</docs-do-dont>
+
+### Ghost
+
+<docs-do-dont>
+<docs-do slot="description" caption="use ghost appearance when using the card inside selectable box">
+
+```html preview center example 170px
+<vwc-selectable-box
+	tight
+	clickable-box
+	connotation="cta"
+	checked
+	class="selectable-box"
+>
+	<vwc-card
+		appearance="ghost"
+		headline="Card with Ghost Appearance"
+		subtitle="slotted inside selectable box"
+	></vwc-card>
+</vwc-selectable-box>
+
+<style>
+	.selectable-box {
+		margin: 16px;
+	}
+</style>
+```
+
+</docs-do>
+
+<docs-do dont caption="don't use ghost appearance when not slotted, this will make the card noticeable">
+
+```html preview center example 150px
+<vwc-card
+	appearance="ghost"
+	headline="Card with Ghost Appearance"
+	class="card-appearance"
+></vwc-card>
+
+<style>
+	.card-appearance {
+		margin: 16px;
+	}
+</style>
+```
+
+</docs-do>
+</docs-do-dont>