Ribbons

Ribbons are premium labels used to communicate status, context, and workflow signals across Aggarly Platform — from card flags (Draft/Verified) to interactive filters and gamified achievements. This page uses true ribbon geometry (banner ribbons) instead of badge-like chips.

Enterprise Status Ribbons on Cards

Recommended pattern: ribbons live on the card header edge for scanning and consistency.

Session Note

Draft note awaiting completion and supervisor review.

Owner: Clinical Team

Plan Review

Supervisor approval recorded with timestamp and attachments.

Last action: Supervisor

Queue2 items

Eligibility Checks

Pending eligibility verification and missing consent form.

Next: Intake Admin

Billing Export

Export blocked due to missing billing permissions.

Policy: Finance

Show code

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <div className="ribbons-grid">
      <RibbonHost className="ribbon-card">
        <div className="ribbon-card__top">
          <div className="ribbon-card__ribbons">
            <Ribbon tone="neutral">Draft</Ribbon>
            <Ribbon variant="outline" tone="primary">HIPAA</Ribbon>
          </div>
        </div>

        <div className="ribbon-card__title">Session Note</div>
        <div className="ribbon-card__desc">
          Draft note awaiting completion and supervisor review.
        </div>
      </RibbonHost>
    </div>
  );
}

Trending Ribbons That Expand

Hover/focus reveals the hint without needing JS. Works well for dashboards.

Weekly Engagement

Hover/focus the ribbon to reveal the hint. No JS needed.

Window: last 7 days

SLA Metrics

Use trending ribbons for operational dashboards (SLA, throughput, completion).

Owner: Ops

Show code

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <RibbonHost className="ribbon-card">
      <div className="ribbon-card__top">
        <div className="ribbon-card__ribbons">
          <Ribbon
            variant="trending"
            tone="primary"
            leadingIcon={<span aria-hidden="true">📈</span>}
            hint="+12% this week"
          >
            Trending
          </Ribbon>
        </div>
      </div>

      <div className="ribbon-card__title">Weekly Engagement</div>
      <div className="ribbon-card__desc">
        Hover/focus the ribbon to reveal the delta hint.
      </div>
    </RibbonHost>
  );
}

Corner Flags on Cards

Corner ribbons are best for non-interactive, at-a-glance status flags (kept crisp).

Student Profile

Corner flags should be reserved for the most important status signal.

Session Note

Corner ribbons clip cleanly inside RibbonHost and remain RTL-safe.

Show code

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <RibbonHost className="ribbon-card">
      <Ribbon placement="corner-top-end" variant="filled" tone="success" size="sm">
        Verified
      </Ribbon>

      <div className="ribbon-card__title">Student Profile</div>
      <div className="ribbon-card__desc">
        Corner ribbons are best for non-interactive card status.
      </div>
    </RibbonHost>
  );
}

Stamp Ribbons (Compliance / Audit)

A rubber-stamp style ribbon for strict, high-signal states (Restricted, Archived, Denied).

RestrictedPolicy locked

Billing Export

Stamp ribbons add authority and a compliance feel without heavy UI.

Role: Finance Admin

ArchivedRead-only

Old Reports

Use for archival states and locked records.

Show code

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <RibbonHost className="ribbon-card">
      <div className="ribbon-card__top">
        <div className="ribbon-card__ribbons">
          <Ribbon variant="stamp" tone="danger" shape="ticket">
            Restricted
          </Ribbon>
        </div>
      </div>

      <div className="ribbon-card__title">Billing Export</div>
      <div className="ribbon-card__desc">
        Stamp ribbons are ideal for compliance and audit flags.
      </div>
    </RibbonHost>
  );
}

Innovative Ribbons: Prism + Signal

Prism = premium gradient-border ribbon. Signal = live indicator ribbon with a dot.

Feature Flags

Still enterprise calm, but visually distinct.

Environment: Staging

Partner

Integrations

Signal works well for monitoring & operational states.

Show code

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <RibbonHost className="ribbon-card">
      <div className="ribbon-card__top">
        <div className="ribbon-card__ribbons">
          <Ribbon variant="prism" tone="secondary">Beta</Ribbon>
          <Ribbon variant="signal" tone="success" hint="Live">Realtime</Ribbon>
        </div>
      </div>

      <div className="ribbon-card__title">Feature Flags</div>
      <div className="ribbon-card__desc">
        Prism = premium border. Signal = live indicator style.
      </div>
    </RibbonHost>
  );
}

Gamified Ribbons on Cards

Premium ribbons for achievements, milestones, and engagement moments. Reduced-motion safe.

Milestones

Use sparingly in enterprise apps: onboarding, training, completion moments.

Track: Onboarding

Show code

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <RibbonHost className="ribbon-card">
      <div className="ribbon-card__top">
        <div className="ribbon-card__ribbons">
          <Ribbon variant="gamified" tone="primary">Achievement</Ribbon>
          <Ribbon variant="gradient" tone="success">Level up</Ribbon>
        </div>
      </div>

      <div className="ribbon-card__title">Milestones</div>
      <div className="ribbon-card__desc">
        Gamified ribbons are reduced-motion safe and premium by default.
      </div>
    </RibbonHost>
  );
}

RibbonBox: Label-on-Panel Pattern

Excellent for dashboard summaries and settings blocks where the surface is already a card/panel.

Autism Support Plan

Boxed ribbons work well for “Student”, “Session”, “Billing”, “Supervisor Notes”.

Last updated: today

New Dashboard

Prism indicates preview features with premium identity.

Audience: Admins

Show code

import { Ribbon, RibbonBox } from "@/design-system/components/Ribbon";

export function Example() {
  return (
    <RibbonBox ribbon={<Ribbon variant="filled" tone="primary">Program</Ribbon>}>
      <div className="ribbon-card__title">Autism Support Plan</div>
      <div className="ribbon-card__desc">
        Boxed ribbons are ideal for summaries and dashboard blocks.
      </div>
    </RibbonBox>
  );
}

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon"; export function Example() { return ( <div className="ribbons-grid"> <RibbonHost className="ribbon-card"> <div className="ribbon-card__top"> <div className="ribbon-card__ribbons"> <Ribbon tone="neutral">Draft</Ribbon> <Ribbon variant="outline" tone="primary">HIPAA</Ribbon> </div> </div> <div className="ribbon-card__title">Session Note</div> <div className="ribbon-card__desc"> Draft note awaiting completion and supervisor review. </div> </RibbonHost> </div> ); }

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon"; export function Example() { return ( <RibbonHost className="ribbon-card"> <div className="ribbon-card__top"> <div className="ribbon-card__ribbons"> <Ribbon variant="trending" tone="primary" leadingIcon={<span aria-hidden="true">📈</span>} hint="+12% this week" > Trending </Ribbon> </div> </div> <div className="ribbon-card__title">Weekly Engagement</div> <div className="ribbon-card__desc"> Hover/focus the ribbon to reveal the delta hint. </div> </RibbonHost> ); }

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon"; export function Example() { return ( <RibbonHost className="ribbon-card"> <Ribbon placement="corner-top-end" variant="filled" tone="success" size="sm"> Verified </Ribbon> <div className="ribbon-card__title">Student Profile</div> <div className="ribbon-card__desc"> Corner ribbons are best for non-interactive card status. </div> </RibbonHost> ); }

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon"; export function Example() { return ( <RibbonHost className="ribbon-card"> <div className="ribbon-card__top"> <div className="ribbon-card__ribbons"> <Ribbon variant="stamp" tone="danger" shape="ticket"> Restricted </Ribbon> </div> </div> <div className="ribbon-card__title">Billing Export</div> <div className="ribbon-card__desc"> Stamp ribbons are ideal for compliance and audit flags. </div> </RibbonHost> ); }

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon"; export function Example() { return ( <RibbonHost className="ribbon-card"> <div className="ribbon-card__top"> <div className="ribbon-card__ribbons"> <Ribbon variant="prism" tone="secondary">Beta</Ribbon> <Ribbon variant="signal" tone="success" hint="Live">Realtime</Ribbon> </div> </div> <div className="ribbon-card__title">Feature Flags</div> <div className="ribbon-card__desc"> Prism = premium border. Signal = live indicator style. </div> </RibbonHost> ); }

import { Ribbon, RibbonHost } from "@/design-system/components/Ribbon"; export function Example() { return ( <RibbonHost className="ribbon-card"> <div className="ribbon-card__top"> <div className="ribbon-card__ribbons"> <Ribbon variant="gamified" tone="primary">Achievement</Ribbon> <Ribbon variant="gradient" tone="success">Level up</Ribbon> </div> </div> <div className="ribbon-card__title">Milestones</div> <div className="ribbon-card__desc"> Gamified ribbons are reduced-motion safe and premium by default. </div> </RibbonHost> ); }

import { Ribbon, RibbonBox } from "@/design-system/components/Ribbon"; export function Example() { return ( <RibbonBox ribbon={<Ribbon variant="filled" tone="primary">Program</Ribbon>}> <div className="ribbon-card__title">Autism Support Plan</div> <div className="ribbon-card__desc"> Boxed ribbons are ideal for summaries and dashboard blocks. </div> </RibbonBox> ); }