OTTODesign System

Components

Paper card

The paper card is a variation of a card that displays discounts.

Configurator

LivePaper card: size, elevation, colour, link behaviour and footer content

20 %

Extra auf Sneaker

Gültig bis 30.09.2026, ab 50 € Bestellwert

Einlösen

Code: SNEAKER20

HTML
<oc-paper-card-v1 elevation-level="stacked"><a href="#" aria-label="Gutschein ansehen" slot="no-action"></a><div style="display:grid;gap:4px"><p class="oc-headline-300">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026, ab 50 € Bestellwert</p></div><oc-button-v1 variant="primary" size="50" slot="footer">Einlösen</oc-button-v1><p class="oc-copy-100" slot="no-footer">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>

Usage

Anatomy

20 %

Extra auf Sneaker

Gültig bis 30.09.2026, ab 50 € Bestellwert

Code: SNEAKER20

Top: default slot · bottom: footer slot

LiveAnatomy - 100
HTML
<div class="on-frame"><div style="max-width:340px;margin:0 auto">
<oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026, ab 50 € Bestellwert</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<p class="demo-label" style="text-align:center;margin-top:12px">Top: default slot · bottom: footer slot</p></div>

10 €

auf Möbel ab 99 €

Code:
MOEBEL10

Left: default slot · right: footer slot

LiveAnatomy - 50
HTML
<div class="on-frame"><div style="max-width:340px;margin:0 auto">
<oc-paper-card-v1 size="50" style="width:100%"><div style="display:grid;gap:2px"><p class="oc-headline-200 oc-text-color-sale">10 €</p><p class="oc-copy-75">auf Möbel ab 99 €</p></div><p slot="footer" class="oc-copy-75">Code:<br><b>MOEBEL10</b></p></oc-paper-card-v1>
<p class="demo-label" style="text-align:center;margin-top:12px">Left: default slot · right: footer slot</p></div>

Variants

The paper card is available in the sizes 100 and 50. You can also change the background color of the paper card with the intended color tokens.

Size 100

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

Size 50

10 €

auf Möbel ab 99 €

Code:
MOEBEL10

Size 100, colour token

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

Size 50, colour token

10 €

auf Möbel ab 99 €

Code:
MOEBEL10

LiveDefault and colored paper card in sizes 100 and 50
HTML
<div class="on-frame" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center">
<p class="demo-label">Size 100</p><oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1></div>
<p class="demo-label">Size 50</p><oc-paper-card-v1 size="50" style="width:100%"><div style="display:grid;gap:2px"><p class="oc-headline-200 oc-text-color-sale">10 €</p><p class="oc-copy-75">auf Möbel ab 99 €</p></div><p slot="footer" class="oc-copy-75">Code:<br><b>MOEBEL10</b></p></oc-paper-card-v1></div>
<p class="demo-label">Size 100, colour token</p><oc-paper-card-v1 style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:4px"><p class="oc-headline-300">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1></div>
<p class="demo-label">Size 50, colour token</p><oc-paper-card-v1 size="50" style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:2px"><p class="oc-headline-200">10 €</p><p class="oc-copy-75">auf Möbel ab 99 €</p></div><p slot="footer" class="oc-copy-75">Code:<br><b>MOEBEL10</b></p></oc-paper-card-v1></div>

The paper card 100 always consists of a body and a footer. Meanwhile, the paper card 50 has an optional footer. Place content in the body of the paper card and actions its footer.

Size 100 with action

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Einlösen

Size 50 with action

10 €

auf Möbel ab 99 €

Einlösen

Size 50 without action

10 €

auf Möbel ab 99 €, automatisch im Warenkorb

LivePaper card in size 100 with action and in size 50 with and without action
HTML
<div class="on-frame" style="display:grid;grid-template-columns:1fr 1fr;gap:24px 32px">
<p class="demo-label">Size 100 with action</p><oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><oc-button-v1 slot="footer" variant="primary" style="width:100%">Einlösen</oc-button-v1></oc-paper-card-v1></div>
<p class="demo-label">Size 50 with action</p><oc-paper-card-v1 size="50" style="width:100%"><div style="display:grid;gap:2px"><p class="oc-headline-200 oc-text-color-sale">10 €</p><p class="oc-copy-75">auf Möbel ab 99 €</p></div><oc-button-v1 slot="footer" variant="primary" size="50">Einlösen</oc-button-v1></oc-paper-card-v1></div>
<p class="demo-label">Size 50 without action</p><oc-paper-card-v1 size="50" style="width:100%"><div style="display:grid;gap:2px"><p class="oc-headline-200 oc-text-color-sale">10 €</p><p class="oc-copy-75">auf Möbel ab 99 €, automatisch im Warenkorb</p></div></oc-paper-card-v1></div>

Behavior

States

If you choose to make the paper card interactive, it will use the states of the interactive overlay.

Enabled (hover and press it)

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

Hover (shown)

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

Pressed (shown)

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

LiveStates
HTML
<div class="on-frame"><div style="max-width:340px;margin:0 auto;display:grid;gap:24px">
<p class="demo-label">Enabled (hover and press it)</p><oc-paper-card-v1 style="width:100%"><a slot="primary-action" href="#" aria-label="Gutschein Sneaker ansehen"></a><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1></div>
<p class="demo-label">Hover (shown)</p><oc-paper-card-v1 style="width:100%;--background-color:color-mix(in srgb, var(--oc-semantic-color-background-canvas) 97%, #000)"><a slot="primary-action" href="#" aria-label="Gutschein Sneaker ansehen"></a><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1></div>
<p class="demo-label">Pressed (shown)</p><oc-paper-card-v1 style="width:100%;--background-color:color-mix(in srgb, var(--oc-semantic-color-background-canvas) 91%, #000)"><a slot="primary-action" href="#" aria-label="Gutschein Sneaker ansehen"></a><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1></div>
</div>

Fitting

The paper card 100 uses fill-parent for the width and fit-content or the height. The body and footer use fit-content individually.

Width fill-parent, height fit-content

20 %

Extra auf Sneaker

Gültig bis 30.09.2026, ab 50 € Bestellwert

Code: SNEAKER20
Livefitting of size 100
HTML
<div class="on-frame"><div class="group" style="max-width:380px;margin:0 auto"><p class="demo-label">Width fill-parent, height fit-content</p>
<oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026, ab 50 € Bestellwert</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
</div>

The paper card 50 uses fill-parent for the width and fit-content for the height. Special about the width is that the body uses fill-parent and the footer uses fit-content.

Body fill-parent, footer fit-content, height fit-content

10 €

auf Möbel ab 99 €

Code:
MOEBEL10
Livefitting of size 50
HTML
<div class="on-frame"><div class="group" style="max-width:380px;margin:0 auto"><p class="demo-label">Body fill-parent, footer fit-content, height fit-content</p>
<oc-paper-card-v1 size="50" style="width:100%"><div style="display:grid;gap:2px"><p class="oc-headline-200 oc-text-color-sale">10 €</p><p class="oc-copy-75">auf Möbel ab 99 €</p></div><p slot="footer" class="oc-copy-75">Code:<br><b>MOEBEL10</b></p></oc-paper-card-v1>
</div>

Placement

Place the paper card inside a cinema if you want to use multiple paper cards next to each other. But it is also possible to just use the paper card standalone.

Inside a cinema

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

10 €

Rabatt auf Möbel

Ab 99 € Bestellwert

Code: MOEBEL10

0 €

Versand für dich

Einmalig bei deiner nächsten Bestellung

Code: GRATIS

Standalone

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Code: SNEAKER20

Livepaper card inside cinema & paper card standalone
HTML
<div class="on-frame" style="display:grid;grid-template-columns:minmax(0,1fr);gap:24px">
<oc-cinema-v1 oc-aria-label="Deine Gutscheine" pagination-dots items-per-page="2">
  <oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
  <oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">10 €</p><p class="oc-headline-100">Rabatt auf Möbel</p><p class="oc-copy-75">Ab 99 € Bestellwert</p></div><p slot="footer" class="oc-copy-100">Code: <b>MOEBEL10</b></p></oc-paper-card-v1>
  <oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">0 €</p><p class="oc-headline-100">Versand für dich</p><p class="oc-copy-75">Einmalig bei deiner nächsten Bestellung</p></div><p slot="footer" class="oc-copy-100">Code: <b>GRATIS</b></p></oc-paper-card-v1>
</oc-cinema-v1>
<div style="max-width:340px;width:100%;justify-self:center"><oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1></div>

The paper card can be placed on canvas (level 1), stacked (level 1.5), above (level 2) or sticky (level 3). For each level, the paper card uses the styling specified by the elevation concept. For stacked placement, the paper card uses a stacked background color by default, however you can change the color of the paper card with the intended color token.

default

20 %

Extra auf Sneaker

Code: SNEAKER20

20 %

Extra auf Sneaker

Code: SNEAKER20

stacked

20 %

Extra auf Sneaker

Code: SNEAKER20

20 %

Extra auf Sneaker

Code: SNEAKER20

above

20 %

Extra auf Sneaker

Code: SNEAKER20

20 %

Extra auf Sneaker

Code: SNEAKER20

sticky

20 %

Extra auf Sneaker

Code: SNEAKER20

20 %

Extra auf Sneaker

Code: SNEAKER20
Livepaper card on different elevation levels
HTML
<div class="on-frame" style="display:grid;grid-template-columns:auto 1fr 1fr;gap:24px 20px;align-items:center">
<oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-paper-card-v1 style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:4px"><p class="oc-headline-300">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<div class="oc-background-color-canvas" style="grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1fr;gap:20px;align-items:center;padding:16px;margin:0 -16px">
  <oc-paper-card-v1 elevation-level="stacked" style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
  <oc-paper-card-v1 elevation-level="stacked" style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:4px"><p class="oc-headline-300">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-paper-card-v1 elevation-level="above" style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-paper-card-v1 elevation-level="above" style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:4px"><p class="oc-headline-300">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-paper-card-v1 elevation-level="sticky" style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-paper-card-v1 elevation-level="sticky" style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:4px"><p class="oc-headline-300">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>

Best practices

20 %

Extra auf Sneaker

Gültig bis 30.09.2026

Einlösen
DoAdd your content to the body and place the main actions within the footer.
Einlösen

20 % Extra auf Sneaker, gültig bis 30.09.2026
Don'tPlace the main actions within the body and use content inside the footer.

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Note: For full technical documentation of this component, visit Storybook/paper card.

Live demo

Deine Gutscheine

Alle ansehen

Nur für dich im Kundenkonto. Löse sie beim Bezahlen ein.

20 %

Extra auf Sneaker

Gültig bis 30.09.2026, ab 50 € Bestellwert

Einlösen

10 €

Rabatt auf Möbel

Ab 99 € Bestellwert, bis 15.10.2026

Einlösen

Versand geschenkt

Wird bei deiner nächsten Bestellung automatisch abgezogen.

0 €
LiveReal OTTO components, rendered by the OTTO component runtime
HTML
<div class="on-frame" style="display:grid;grid-template-columns:minmax(0,1fr);gap:16px">
<oc-block-v2><div style="display:grid;gap:16px">
  <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px"><p class="oc-headline-200">Deine Gutscheine</p><oc-link-v2><a href="#">Alle ansehen</a></oc-link-v2></div>
  <p class="oc-copy-100">Nur für dich im Kundenkonto. Löse sie beim Bezahlen ein.</p>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:16px">
    <oc-paper-card-v1 elevation-level="stacked" style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026, ab 50 € Bestellwert</p></div><oc-button-v1 slot="footer" variant="primary" size="50" style="width:100%">Einlösen</oc-button-v1></oc-paper-card-v1>
    <oc-paper-card-v1 elevation-level="stacked" style="width:100%;--background-color:var(--oc-semantic-color-background-card-purple);color:var(--oc-semantic-color-text-inverted)"><div style="display:grid;gap:4px"><p class="oc-headline-300">10 €</p><p class="oc-headline-100">Rabatt auf Möbel</p><p class="oc-copy-75">Ab 99 € Bestellwert, bis 15.10.2026</p></div><oc-button-v1 slot="footer" variant="secondary-over-color" size="50" style="width:100%">Einlösen</oc-button-v1></oc-paper-card-v1>
  <oc-paper-card-v1 size="50" elevation-level="stacked" style="width:100%"><div style="display:grid;gap:2px"><p class="oc-headline-100">Versand geschenkt</p><p class="oc-copy-75">Wird bei deiner nächsten Bestellung automatisch abgezogen.</p></div><p slot="footer" class="oc-headline-200 oc-text-color-sale">0 €</p></oc-paper-card-v1>
</oc-block-v2>

Code

Version Tag Status API
v1 <oc-paper-card-v1> Stable, allowed for generation PaperCardV1

Overview

Paper card

The paper card component provides a configurable card with attributes for setting the size and background color. It has slots for setting the main and footer content and an event that triggers when a property is changed.

Default variation
FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1>
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>
Configuration

The paper card is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the paper card component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Paper card UX documentation for detailed user experience guidelines.

Accessibility

The paper card component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Configuration

Paper card configuration

Configure the paper card component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1>
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Paper Card v1 API

API: <oc-paper-card-v1> (PaperCardV1)

The paper card component provides a configurable card with attributes for setting the size and background color. It has slots for setting the main and footer content and an event that triggers when a property is changed.

Attributes / properties
Attribute Type Default Required Description
size "50" | "100" "100" no Sets the size of the paper card.
elevation-level "canvas" | "stacked" | "above" | "sticky" "canvas" no Sets the elevation level of the paper card. The elevation level determines the shadow and depth of the paper card. - canvas: no shadow, paper card appears flat, to be used on frame. - stacked: shadow, paper card appears stacked, to be used on canvas. - above: shadow, paper card appears above other levels. - sticky: shadow, paper card appears above all other levels and is sticky.
background-color string undefined no Deprecated: The background-color attribute is deprecated. Please use the CSS-Variable --background-color instead.

Sets the background color of the paper card. Note that the preferred way of using colors is via design tokens instead of hex values.
base64-href string undefined no Sets the base64 encoded link target of the paper card. Use this attribute to prevent search engines from indexing the link target.
target "_blank" | "_self" | "_parent" | "_top" undefined no Sets the target attribute of the paper card.

Note Only applies when href or base64Href is set.
rel string undefined no Sets the rel attribute of the paper card.

Note Only applies when href or base64Href is set.
as-button boolean false no Determines if the paper card behaves as a button or as a link when clicked. Set to true to make the paper card behave as a button and trigger an action instead of navigating to a new page.
oc-aria-label string undefined no Sets the ARIA label of the paper card.
Slots
Slot Required Description
default no Sets the main content of the paper card. It is displayed in the paper card of size=50, and in the top part of the paper card with size=100.
primary-action no Add an empty tag to change the default behavior of the card component.

- empty a tag: the card component behaves as a link (SEO relevant) - empty button tag: the card component behaves as a button - empty div tag: for link masking when there are multiple interactive elements
footer no Sets the footer content of the paper card. This slot only applies to paper cards with size=100. Example:
<span slot="footer" href="#">My footer</a>
Events
Event Detail type Description
oc-property-change OcPaperCardV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.
CSS custom properties
Custom property Default Description
--background-color undefined Sets the background color of the paper card. Note: The preferred way of using colors is via design tokens instead of hex values.

Variations

Variations

Listed below are the most common variations of the paper card component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-paper-card-variations--default · tags: components

The default configuration uses size=50 with an empty default and footer slot.

FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1>
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>
Size 50

Story: components-paper-card-variations--size-50 · tags: components

Variation with size=50 and a placeholder in the default slot.

Args: size=50, footerSlot=``

DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1 size="50">
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>

Story: components-paper-card-variations--size-50-with-footer · tags: components

Variation with size=50 and a placeholder in the default slot.

Args: size=50

FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1 size="50">
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>
Custom background color

Story: components-paper-card-variations--custom-background-color · tags: components

Variation with a custom background color set via the --background-color CSS variable using a Design Token.

Args: size=100, --background-color=var(--oc-semantic-color-hint-100)

FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1 size="100" style="--background-color: var(--oc-semantic-color-hint-100)">
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>
With button behavior

Story: components-paper-card-variations--with-button-behavior · tags: components

Variation using the as-button attribute to provide button functionality and trigger an action instead of navigating to a new page.

Args: as-button=true, oc-aria-label=Card

FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1 as-button oc-aria-label="Card">
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>

Story: components-paper-card-variations--with-link-behavior · tags: components

The card component with a link as primary action. Search engines will detect the href.

Args: primaryActionSlot=(see snippet)

<oc-paper-card-v1>
  <oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a slot="primary-action" href='#' aria-label='Card'></a>
  <oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>

Story: components-paper-card-variations--with-masked-link-behavior · tags: components

The card component as a masked link. Search engines will not detect the href.

Args: base64-href=Iw==, oc-aria-label=Card

FOOTER SLOT PLACEHOLDER DEFAULT SLOT PLACEHOLDER
HTML
<oc-paper-card-v1 base64-href="Iw==" oc-aria-label="Card">
<oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
<oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>

Story: components-paper-card-variations--with-link-switch-behavior · tags: components

The card component as a link with switch behavior. Search engines will detect the href, while users receive the Base64-encoded version.

Args: base64-href=Iz92YXJpYW50PWZvbw==, primaryActionSlot=(see snippet)

<oc-paper-card-v1 base64-href="Iz92YXJpYW50PWZvbw==">
  <oc-placeholder-v1 slot="footer" variant="text" class="oc-headline-100">FOOTER SLOT PLACEHOLDER</oc-placeholder-v1>
  <!--Search engines will detect the href, while users receive the Base64-encoded version.--><a href='#' slot="primary-action" aria-label='Card'></a>
  <oc-placeholder-v1 variant="text" class="oc-headline-100">DEFAULT SLOT PLACEHOLDER</oc-placeholder-v1>
</oc-paper-card-v1>
Demo voucher

Story: components-paper-card-variations--demo-voucher · tags: components

Variation with a oc-text-field-v1 component in the default slot and a oc-button-v1 component in the footer slot.

Code Einlösen
HTML
<oc-paper-card-v1 size="100" style="--background-color: white">
<oc-text-field-v1
  name="myName"
  value="DZ4FCQRDNCYY77BV"
  type="text"
  placeholder="Voucher Code"
>
  Code
</oc-text-field-v1>
<oc-button-v1 slot="footer" variant="primary" size="100"> Einlösen</oc-button-v1>
</oc-paper-card-v1>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo voucher",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-paper-card-v1 size="100" style="--background-color: white">
        <oc-text-field-v1
          name="myName"
          value="DZ4FCQRDNCYY77BV"
          type="text"
          placeholder="Voucher Code"
        >
          Code
        </oc-text-field-v1>
        <oc-button-v1 slot="footer" variant="primary" size="100"> Einlösen</oc-button-v1>
      </oc-paper-card-v1>
    `;
  }
}
Demo discount

Story: components-paper-card-variations--demo-discount · tags: components

Demo of two variations of the paper card that are used to promote a discount.

  • The first variation uses an oc-tag-v1 component in the default slot and an oc-icon-v1 component in the footer slot.
  • The second variation uses an oc-switch-v3 component in the default slot.
25% Extra
Extra auf ausgewählte Artikel
Angewendet
Jetzt 20% Extra sparen
nur bis 20.04.2034
HTML
<oc-paper-card-v1 size="100" style="--background-color: white">
<oc-tag-v1 variant="sale" size="50">25% Extra</oc-tag-v1>
<div class="oc-headline-100 oc-mt-25">Extra auf ausgewählte Artikel</div>
<div slot="footer" class="centerItem" style="color:#007268">
  <oc-icon-v1 type="check" size="50" class="oc-mr-25"></oc-icon-v1>Angewendet
</oc-paper-card-v1>
<oc-paper-card-v1
size="50"
style="--background-color: var(--oc-semantic-color-hint-100)"
class="oc-mt-200"
>
<div class="discountWrapper oc-gap-25">
  <div class="discountTitle">
    <div class="oc-headline-100">Jetzt 20% Extra sparen</div>
    <div class="oc-copy-75">nur bis 20.04.2034</div>
  <oc-switch-v3 size="100" class="oc-copy-50" style="color: white;">
    <input type="checkbox" aria-label="Rabatt anwenden" />
  </oc-switch-v3>
</oc-paper-card-v1>
<style>
.centerItem {
  display: flex;
  place-content: center;
}
.discountTitle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
  color: white;
}
.discountWrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo discount",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-paper-card-v1 size="100" style="--background-color: white">
        <oc-tag-v1 variant="sale" size="50">25% Extra</oc-tag-v1>
        <div class="oc-headline-100 oc-mt-25">Extra auf ausgewählte Artikel</div>
        <div slot="footer" class="centerItem" style="color:#007268">
          <oc-icon-v1 type="check" size="50" class="oc-mr-25"></oc-icon-v1>Angewendet
        </div>
      </oc-paper-card-v1>

      <oc-paper-card-v1
        size="50"
        style="--background-color: var(--oc-semantic-color-hint-100)"
        class="oc-mt-200"
      >
        <div class="discountWrapper oc-gap-25">
          <div class="discountTitle">
            <div class="oc-headline-100">Jetzt 20% Extra sparen</div>
            <div class="oc-copy-75">nur bis 20.04.2034</div>
          </div>
          <oc-switch-v3 size="100" class="oc-copy-50" style="color: white;">
            <input type="checkbox" aria-label="Rabatt anwenden" />
          </oc-switch-v3>
        </div>
      </oc-paper-card-v1>

      <style>
        .centerItem {
          display: flex;
          place-content: center;
        }

        .discountTitle {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 8px 4px;
          color: white;
        }

        .discountWrapper {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      </style>
    `;
  }
}
Demo promotion

Story: components-paper-card-variations--demo-promotion · tags: components

Demo of a promotion card that is used to promote selected sports equipment and electronics.

Ausgewählte Sportgeräte und auch für Haushalt und Elektronik und noch mehr Text
nur bis morgen, 23:59 Uhr
Details
HTML
<oc-paper-card-v1 size="50" style="--background-color: white">
<button slot="primary-action" aria-owns="aria123"></button>
<div
  id="aria123"
  style="display: grid; grid-template-areas: 'image text' 'image subtext'; column-gap: 8px;"
>
  <ofc-placeholder-v1
    style="width: 44px; height: 44px; grid-area: image;"
    variant="image"
  ></ofc-placeholder-v1>
  <div class="oc-copy-100 oc-copy--bold">
    Ausgewählte Sportgeräte und auch für Haushalt und Elektronik und noch mehr Text
  <div class="oc-copy-50">nur bis morgen, 23:59 Uhr</div>
<oc-link-v2 size="100" slot="footer" as-button class="oc-secondary-action"
  >Details</oc-link-v2
>
</oc-paper-card-v1>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo promotion",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-paper-card-v1 size="50" style="--background-color: white">
        <button slot="primary-action" aria-owns="aria123"></button>
        <div
          id="aria123"
          style="display: grid; grid-template-areas: 'image text' 'image subtext'; column-gap: 8px;"
        >
          <ofc-placeholder-v1
            style="width: 44px; height: 44px; grid-area: image;"
            variant="image"
          ></ofc-placeholder-v1>
          <div class="oc-copy-100 oc-copy--bold">
            Ausgewählte Sportgeräte und auch für Haushalt und Elektronik und noch mehr Text
          </div>
          <div class="oc-copy-50">nur bis morgen, 23:59 Uhr</div>
        </div>
        <oc-link-v2 size="100" slot="footer" as-button class="oc-secondary-action"
          >Details</oc-link-v2
        >
      </oc-paper-card-v1>
    `;
  }
}