Components / Display & Media / Torn Ticket

Torn Ticket beta

A ticket with a real perforation: notched edges, a dashed tear line, and a stub that keeps the code.

Preview

NORTHWIND HALL · LIVE

Winter Sessions — Night Two

Sat, Dec 12 · Doors 18:30 · Show 19:00
General admission · Row GA · Seat 114

ADMIT ONE NW-2417 $48.00

<div style="padding:14px 8px">
  <div class="k-tick">
    <div class="k-tick-main">
      <p class="ev">NORTHWIND HALL · LIVE</p>
      <h3>Winter Sessions — Night Two</h3>
      <p>Sat, Dec 12 · Doors 18:30 · Show 19:00<br>General admission · Row GA · Seat 114</p>
    </div>
    <div class="k-tick-stub">
      <span class="lbl">ADMIT ONE</span>
      <span class="code">NW-2417</span>
      <span class="k-tick-bar" aria-hidden="true"></span>
      <span class="lbl">$48.00</span>
    </div>
  </div>
</div>

/* KATA Torn Ticket — perforation by mask, stub by flex. */
.k-tick{--px:calc(100% - 98px);display:flex;width:100%;max-width:520px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:13px;font-family:var(--k-font);color:var(--k-ink);transform:rotate(-1.1deg);box-shadow:0 14px 28px -14px rgba(16,24,40,.28);
  -webkit-mask:radial-gradient(circle 10px at var(--px) 0, transparent 10px, #000 11px), radial-gradient(circle 10px at var(--px) 100%, transparent 10px, #000 11px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 10px at var(--px) 0, transparent 10px, #000 11px), radial-gradient(circle 10px at var(--px) 100%, transparent 10px, #000 11px);
  mask-composite:intersect}
.k-tick-main{flex:1;padding:19px 20px;min-width:0}
.k-tick-main .ev{font-size:11px;font-weight:650;letter-spacing:.16em;color:var(--k-accent-ink)}
.k-tick-main h3{font-size:18.5px;font-weight:650;letter-spacing:-.015em;margin:6px 0 5px}
.k-tick-main p{font-size:12.5px;color:var(--k-ink-2);line-height:1.7}
.k-tick-stub{flex:none;width:98px;border-inline-start:2px dashed var(--k-zinc-300);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px;text-align:center}
.k-tick-stub .code{font-size:14px;font-weight:700;letter-spacing:.1em}
.k-tick-stub .lbl{font-size:10px;letter-spacing:.14em;color:var(--k-ink-3)}
.k-tick-bar{width:64px;height:26px;background:repeating-linear-gradient(90deg, var(--k-ink) 0 2px, transparent 2px 5px, var(--k-ink) 5px 6px, transparent 6px 10px, var(--k-ink) 10px 13px, transparent 13px 16px)}
@media (max-width:460px){.k-tick{--px:calc(100% - 84px)}.k-tick-stub{width:84px}}

Installation

CLI

node kata-ui.mjs add torn-ticket

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

Load tokens.css once, before any part.
Copy the CSS tab into your stylesheet.
Copy the HTML where it belongs.

Usage

For tickets, coupons and boarding-pass moments in interfaces: the notches are cut by CSS masks at the tear line, the line itself is dashed, and the stub carries the code and the barcode. Slightly rotated on the page, it reads as paper; at zero degrees, as policy. The tear is visual — pair it with a real "use coupon" action.

Accessibility

Everything on the ticket is ordinary text in reading order — event, seat, code — and the perforation is mask paint that assistive technology never meets. Do not encode the only copy of a code in the barcode stripes; they are decorative, and the digits sit beside them.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

`.k-tick`	class
`.k-tick-main`	class
`.ev`	class
`.k-tick-stub`	class
`.code`	class
`.lbl`	class
`.k-tick-bar`	class
`aria-hidden`	ARIA

Timeline

Typeset

Torn Ticket beta

Winter Sessions — Night Two

Installation

CLI

Manual

Usage

Accessibility

Anatomy

Related parts

Aspect Ratio beta

Avatar beta

Bar Chart beta

Candlestick Chart beta