diff --git a/.storybook/styles.css b/.storybook/styles.css index ae35084..c712c20 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -1,3 +1,11 @@ .docblock-argstable-body label { min-height: auto; } + +docs-placeholder { + border: dotted 1px var(--diamond-theme-border-color-hover); + border-radius: var(--diamond-radius-sm); + display: block; + padding: var(--diamond-spacing-lg); + text-align: center; +} diff --git a/components/canvas/Card/Card.stories.ts b/components/canvas/Card/Card.stories.ts index 7a61cf0..6bf5530 100644 --- a/components/canvas/Card/Card.stories.ts +++ b/components/canvas/Card/Card.stories.ts @@ -43,11 +43,13 @@ export const Card: StoryObj = { padding="${padding}" class="diamond-theme-${theme}" > -

Card title

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

+ +

Placeholder content

+

+ The slot can contain anything, the card component acts as a simple + wrapper with optional props for styling the card itself. +

+
`, }; @@ -89,3 +91,47 @@ export const Interactive: StoryObj = { `, }; + +Interactive.parameters = { + docs: { + description: { + story: `The card can be made interactive by wrapping the card in an anchor or button element. + `, + }, + }, +}; + +export const ImageCard: StoryObj = { + render: () => html` + + + + Placeholder + +

Card title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + +
+
+ `, +}; + +ImageCard.parameters = { + docs: { + description: { + story: `As a flexible canvas element, the card can be used for any number of layouts. For example, a simple image card.`, + }, + }, +};