Returnless UI

Card ​

Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.

Variants ​

Notifications

You have 3 unread messages.

Card content
js
<script lang="ts" setup>
import {
  Button, 
  Card, 
  CardDescription, 
  CardFooter, 
  CardHeader, 
  CardHelp, 
  CardSection, 
  CardTitle,
} from '@returnless/focus-ui';
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle :card-help="{ label: 'Learn more', href: '/help' }">
        Notifications
      </CardTitle>
      <CardDescription>You have 3 unread messages.</CardDescription>
    </CardHeader>
    <CardSection>
      <div>Card content</div>
    </CardSection>
    <CardFooter>
      <Button variant="primary">Button</Button>
    </CardFooter>
  </Card>
</template>

Card layout ​

Use the CardLayout component to create a grid of cards.

column 1
column 2
column 3
column 4
js
<script lang="ts" setup>
import {
  Card,
  CardLayout,
  CardSection,
} from '@returnless/focus-ui';
</script>

<template>
  <CardLayout :columns="2">
    <Card>
      <CardSection>column 1</CardSection>
    </Card>
    <Card>
      <CardSection>column 2</CardSection>
    </Card>
    <Card>
      <CardSection>column 3</CardSection>
    </Card>
    <Card>
      <CardSection>column 4</CardSection>
    </Card>
  </CardLayout>
</template>

Example with media image ​

Media image
Test-mode

Focus-UI return form

Returnless webshop

js
<script lang="ts" setup>
import {
  Badge,
  Button, 
  ButtonGroup,
  Card, 
  CardDescription, 
  CardHeader, 
  CardHelp, 
  CardLayout,
  CardMedia,
  CardSection, 
  CardTitle,
} from '@returnless/focus-ui';
</script>

<template>
  <CardLayout :columns="2">
    <Card>
      <CardMedia alt="Media image" :ratio="16 / 7" source="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg">
        <Badge color="yellow">Test-mode</Badge>
      </CardMedia>
      <CardHeader>
        <CardTitle>Focus-UI return form</CardTitle>
        <CardDescription>Returnless webshop</CardDescription>
      </CardHeader>
      <CardSection>
        <ButtonGroup>
          <Button variant="secondary">Settings</Button>
          <Button variant="ghost">Preview</Button>
        </ButtonGroup>
      </CardSection>
    </Card>
  </CardLayout>
</template>

Example with integration ​

Adobe commerce

Smartphonehoesjes Vendiro orders

Smartphonehoesjes.nl acceptatie

js
<script lang="ts" setup>
import {
  Button, 
  ButtonGroup,
  Card, 
  CardDescription, 
  CardHeader, 
  CardIcon,
  CardLayout,
  CardSection, 
  CardTitle,
} from '@returnless/focus-ui';
</script>

<template>
  <CardLayout :columns="2">
    <Card>
      <CardHeader>
        <CardIcon source="https://panel.returnless.test/img/integrations/adobe-commerce-logo.svg" alt="Adobe 
commerce" />
        <CardTitle>Smartphonehoesjes Vendiro orders</CardTitle>
        <CardDescription>Smartphonehoesjes.nl acceptatie</CardDescription>
      </CardHeader>
      <CardSection>
        <ButtonGroup>
          <Button variant="secondary">Settings</Button>
        </ButtonGroup>
      </CardSection>
    </Card>
  </CardLayout>
</template>

Best practices ​

Cards should:

  • Group related information.
  • Display information in a way that prioritizes what the user needs to know most first.
  • Use headings that set clear expectations about the card's purpose.
  • Stick to single user flows or break more complicated flows into multiple sections.
  • Avoid too many call-to-action buttons or links and only one primary call to action per card.
  • Use calls to action on bottom of the card for next steps and use the space in the upper right corner of the card for persistent, option actions (such as Edit).