Ribbon

An information box.

The Ribbon component serves the purpose of presenting quick information to the user.

Source code

Theme

Variants

Storybook

Free trial

Create new accountStart your 7-days trial period

Full name

Email address

Tone

Color

Position

Size

Shadow

Shadow Color

Radius

import { Ribbon } from '@almond-ui/core';

function App() {
  return (
    <Card>
      <Card.Header className="relative">
        <Ribbon radius="md" shadow="none">Free trial</Ribbon>
        <span>Create new account</span>
      </Card.Header>
      <Card.Body>
        // ...
      </Card.Body>
    </Card>
  );
}

Import

Import the Ribbon component using the following import statement.

import { Ribbon } from '@almond-ui/core';

The parent component of the Ribbon component must have position: relative set on it.

Variants

The Ribbon component comes with a number of pre-defined variants that can be used to change the appearance of the component. The variants can be used by passing the variant name as a prop to the component. A variant is basically a pre-set set of properties. Read more about variants here.

Available variants are: primary, secondary, danger, success, warning and info.

Primary

This is just a Card

Secondary

This is just a Card

Danger

This is just a Card

Success

This is just a Card

Warning

This is just a Card

Info

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon variant="primary">Primary</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon variant="secondary">Secondary</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon variant="danger">Danger</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon variant="success">Success</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon variant="warning">Warning</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon variant="info">Info</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Tones & Colors

The Ribbon component comes with three tones: solid, light and glossy.

The available color values are: white, blue, red, green, yellow, purple, gray, dark and black.

Solid

White

This is just a Card

Blue

This is just a Card

Red

This is just a Card

Green

This is just a Card

Yellow

This is just a Card

Purple

This is just a Card

Gray

This is just a Card

Dark

This is just a Card

Black

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="white">White</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="blue">Blue</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="red">Red</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="green">Green</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="yellow">Yellow</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="purple">Purple</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="gray">Gray</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="dark">Dark</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="solid" color="black">Black</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Light

White

This is just a Card

Blue

This is just a Card

Red

This is just a Card

Green

This is just a Card

Yellow

This is just a Card

Purple

This is just a Card

Gray

This is just a Card

Dark

This is just a Card

Black

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="white">White</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="blue">Blue</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="red">Red</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="green">Green</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="yellow">Yellow</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="purple">Purple</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="gray">Gray</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="dark">Dark</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="light" color="black">Black</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Glossy

White

This is just a Card

Blue

This is just a Card

Red

This is just a Card

Green

This is just a Card

Yellow

This is just a Card

Purple

This is just a Card

Gray

This is just a Card

Dark

This is just a Card

Black

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="white">White</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="blue">Blue</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="red">Red</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="green">Green</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="yellow">Yellow</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="purple">Purple</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="gray">Gray</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="dark">Dark</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon tone="glossy" color="black">Black</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Sizes

Available size values are: sm, md and lg.

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon size="sm">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon size="md">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon size="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Radiuses

Available radius values are: none, sm, base, md and lg.

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon radius="none">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon radius="sm">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon radius="base">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon radius="md">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon radius="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Shadows

Available shadow values are: none, sm, base, md, lg and xl.

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon shadow="none">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadow="sm">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadow="base">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadow="md">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadow="xl">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Shadow colors

Available shadowColor values are: blue, red, green, yellow, purple, gray, dark and black.

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

<View>
<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="blue" color="blue" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="red" color="red" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="green" color="green" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="yellow" color="yellow" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="purple" color="purple" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="gray" color="gray" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="dark" color="dark" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon shadowColor="black" color="black" shadow="lg">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>
</View>

Positions

Available position values are: top-right, right, top-left and left.

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

Ribbon

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon position="top-right">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon position="right">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon position="top-left">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>

  <Card>
    <Card.Header className="relative">
      <Ribbon position="left">Ribbon</Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

Examples

With icon

This is just a Card

<View>
  <Card>
    <Card.Header className="relative">
      <Ribbon size="lg">
        <Star />
      </Ribbon>
      <span>This is just a Card</span>
    </Card.Header>
  </Card>
</View>

API Reference

Properties

Prop	Type	Description	Default
color	`RibbonColor`	Sets the color	`dark`
position	`RibbonPosition`	Sets the position	`top-right`
radius	`RibbonRadius`	Sets the border radius	`base`
shadow	`RibbonShadow`	Sets the shadow size	`base`
shadowColor	`RibbonShadowColor`	Sets the shadow color	`none`
size	`RibbonSize`	Sets the ribbon size	`md`
tone	`RibbonTone`	Sets the ribbon tone	`solid`
variant	`RibbonVariant`	Sets the ribbon variant	`undefined`

Types

type RibbonColor =
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';

type RibbonPosition = 'left' | 'right' | 'top-left' | 'top-right';

type RibbonRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';

type RibbonShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';

type RibbonShadowColor =
  | 'none'
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';

type RibbonSize = 'sm' | 'md' | 'lg';

type RibbonTone = 'solid' | 'light' | 'glossy';

type RibbonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';

Progress Table