Signature Library · Indian

Ration Card

A profile card with a folded crease, pen ink and a stamp for every month.

Works as a membership or loyalty card. Click a month to stamp or clear it.

States

Default
Hover
Active
Focus

Code

ration-card.html

<div class="sig-ration-card">
  <span class="sig-ration-card__head">
    <span class="sig-ration-card__kind">Family card</span>
    <span class="sig-ration-card__no">07 G 048213</span>
  </span>
  <span class="sig-ration-card__body">
    <span class="sig-ration-card__photo" aria-hidden="true">RL</span>
    <span class="sig-ration-card__fields">
      <span class="sig-ration-card__field">
        Head of family
        <span class="sig-ration-card__value">R. Lakshmi</span>
      </span>
      <span class="sig-ration-card__field">
        Members
        <span class="sig-ration-card__value">4 adults, 1 child</span>
      </span>
    </span>
  </span>
  <span class="sig-ration-card__months">
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 1">J</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 2">F</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 3">M</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 4">A</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 5">M</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 6">J</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 7">J</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 8">A</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 9">S</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 10">O</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="false" aria-label="Month 11">N</button>
    <button class="sig-ration-card__month" type="button" aria-pressed="false" aria-label="Month 12">D</button>
  </span>
</div>

ration-card.css

.sig-ration-card {
  --sig-cover: #f2e4ae;
  --sig-ink: #1d3f8f;
  --sig-stamp: #b3242a;
  --sig-w: 280px;
  --sig-speed: 260ms;
}

.sig-ration-card {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  width: min(100%, var(--sig-w));
  padding: 10px 12px;
  color: #3a3320;
  font-family: Georgia, 'Times New Roman', serif;
  background: linear-gradient(90deg, transparent 49.6%, rgba(90,70,20,.28) 50%, rgba(255,255,255,.4) 50.4%, transparent 51%), linear-gradient(115deg, rgba(255,255,255,.3), transparent 42%), var(--sig-cover);
  border-radius: 3px;
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
}

.sig-ration-card__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(58,51,32,.5);
}

.sig-ration-card__body {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
  align-items: center;
}

.sig-ration-card__photo {
  display: grid;
  place-items: center;
  height: 60px;
  color: #6d6448;
  font-family: system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(180deg, #d8d2bf, #b3ad98);
  border: 2px solid #fff;
  transform: rotate(-2deg);
}

.sig-ration-card__fields {
  display: grid;
  gap: 3px;
  font-size: 9px;
}

.sig-ration-card__field {
  display: block;
}

.sig-ration-card__value {
  display: block;
  color: var(--sig-ink);
  font-family: 'Segoe Print', 'Bradley Hand', cursive;
  font-size: 13px;
  line-height: 1.15;
  border-bottom: 1px dotted rgba(58,51,32,.55);
}

.sig-ration-card__months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
}

.sig-ration-card__month {
  height: 20px;
  padding: 0;
  color: #3a3320;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  background: none;
  border: 1px solid rgba(58,51,32,.4);
  cursor: pointer;
}

.sig-ration-card__month:hover {
  background: rgba(255,255,255,.4);
}

.sig-ration-card__month:focus-visible {
  outline: 2px solid var(--sig-ink);
}

.sig-ration-card__month[aria-pressed=true] {
  color: var(--sig-stamp);
  font-weight: 700;
  border-color: var(--sig-stamp);
  border-radius: 50%;
  transform: rotate(-14deg);
  animation: sig-thud var(--sig-speed) ease;
}

@keyframes sig-thud {
  0% { transform: rotate(-14deg) scale(1.8); opacity: 0; }
  100% { transform: rotate(-14deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sig-ration-card__month {
    animation: none !important;
    transition: none !important;
  }
}

ration-card.js

document.querySelectorAll(".sig-ration-card").forEach((el) => {
  const stamp = (e) => {
    const hit = (e.target).closest("button");
    if (hit) hit.setAttribute("aria-pressed", String(hit.getAttribute("aria-pressed") !== "true"));
  };
  el.addEventListener("click", stamp);
  return () => el.removeEventListener("click", stamp);
});

ration-card.tsx

import { useEffect, useRef } from "react";
import type React from "react";
import "./ration-card.css"; // the CSS tab

function attach(el: HTMLElement) {
  const stamp = (e: MouseEvent) => {
    const hit = (e.target as HTMLElement).closest("button");
    if (hit) hit.setAttribute("aria-pressed", String(hit.getAttribute("aria-pressed") !== "true"));
  };
  el.addEventListener("click", stamp);
  return () => el.removeEventListener("click", stamp);
}

export function SigRationCard({ children = "R. Lakshmi", ...props }: React.ComponentProps<"div">) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => attach(ref.current!), []);

  return (
    <div className="sig-ration-card" ref={ref} {...props}>
      <span className="sig-ration-card__head">
        <span className="sig-ration-card__kind">{"Family card"}</span>
        <span className="sig-ration-card__no">{"07 G 048213"}</span>
      </span>
      <span className="sig-ration-card__body">
        <span className="sig-ration-card__photo" aria-hidden="true">{"RL"}</span>
        <span className="sig-ration-card__fields">
          <span className="sig-ration-card__field">
            {"Head of family"}
            <span className="sig-ration-card__value">{children}</span>
          </span>
          <span className="sig-ration-card__field">
            {"Members"}
            <span className="sig-ration-card__value">{"4 adults, 1 child"}</span>
          </span>
        </span>
      </span>
      <span className="sig-ration-card__months">
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 1">{"J"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 2">{"F"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 3">{"M"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 4">{"A"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 5">{"M"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 6">{"J"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 7">{"J"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 8">{"A"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 9">{"S"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="true" aria-label="Month 10">{"O"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="false" aria-label="Month 11">{"N"}</button>
        <button className="sig-ration-card__month" type="button" aria-pressed="false" aria-label="Month 12">{"D"}</button>
      </span>
    </div>
  );
}

ration-card.html

<div class="sig-ration-card relative [box-sizing:border-box] grid gap-[7px] w-[min(100%,_280px)] [padding:10px_12px] text-[#3a3320] [font-family:Georgia,_'Times_New_Roman',_serif] [background:linear-gradient(90deg,_transparent_49.6%,_rgba(90,70,20,.28)_50%,_rgba(255,255,255,.4)_50.4%,_transparent_51%),_linear-gradient(115deg,_rgba(255,255,255,.3),_transparent_42%),_#f2e4ae] rounded-[3px] [box-shadow:0_8px_16px_rgba(0,0,0,.4)]">
  <span class="[display:flex] [justify-content:space-between] [padding-bottom:4px] text-[10px] font-[700] [letter-spacing:0.12em] [text-transform:uppercase] [border-bottom:1px_solid_rgba(58,51,32,.5)]">
    <span>Family card</span>
    <span>07 G 048213</span>
  </span>
  <span class="grid [grid-template-columns:50px_1fr] gap-[10px] items-center">
    <span class="grid [place-items:center] h-[60px] text-[#6d6448] [font-family:system-ui,_sans-serif] text-[20px] font-[700] [background:linear-gradient(180deg,_#d8d2bf,_#b3ad98)] [border:2px_solid_#fff] [transform:rotate(-2deg)]" aria-hidden="true">RL</span>
    <span class="grid gap-[3px] text-[9px]">
      <span class="[display:block]">
        Head of family
        <span class="[display:block] text-[#1d3f8f] [font-family:'Segoe_Print',_'Bradley_Hand',_cursive] text-[13px] [line-height:1.15] [border-bottom:1px_dotted_rgba(58,51,32,.55)]">R. Lakshmi</span>
      </span>
      <span class="[display:block]">
        Members
        <span class="[display:block] text-[#1d3f8f] [font-family:'Segoe_Print',_'Bradley_Hand',_cursive] text-[13px] [line-height:1.15] [border-bottom:1px_dotted_rgba(58,51,32,.55)]">4 adults, 1 child</span>
      </span>
    </span>
  </span>
  <span class="grid [grid-template-columns:repeat(12,_1fr)] gap-[1px]">
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 1">J</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 2">F</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 3">M</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 4">A</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 5">M</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 6">J</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 7">J</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 8">A</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 9">S</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="true" aria-label="Month 10">O</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="false" aria-label="Month 11">N</button>
    <button class="h-[20px] [padding:0] text-[#3a3320] [font-family:ui-monospace,_Consolas,_monospace] text-[10px] [background:none] [border:1px_solid_rgba(58,51,32,.4)] cursor-pointer hover:[background:rgba(255,255,255,.4)] focus-visible:[outline:2px_solid_#1d3f8f] [&[aria-pressed=true]]:text-[#b3242a] [&[aria-pressed=true]]:font-[700] [&[aria-pressed=true]]:[border-color:#b3242a] [&[aria-pressed=true]]:rounded-[50%] [&[aria-pressed=true]]:[transform:rotate(-14deg)] [&[aria-pressed=true]]:[animation:sig-thud_260ms_ease] motion-reduce:[animation:none!important]" type="button" aria-pressed="false" aria-label="Month 12">D</button>
  </span>
</div>

<!-- A class cannot hold keyframes: keep this in your CSS. -->
<style>
@keyframes sig-thud {
  0% { transform: rotate(-14deg) scale(1.8); opacity: 0; }
  100% { transform: rotate(-14deg) scale(1); opacity: 1; }
}
</style>

<!-- Needs the script from the JS tab. -->

States

Code

More in Indian