{% extends 'base.html' %}

{% block main %}

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Ribbons</h1>
              <p class="ax-page-head__subtitle">Corner banners, edge flags and pill tags — pinned to any glass card.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/ui/badges/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7a2.2 2.2 0 0 0 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1a2.2 2.2 0 0 0 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1"/></svg>
                <span class="ax-btn__label">Badges</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ PAGE CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- ───── Corner ribbons ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Corner ribbons">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">45° banner</span>
                <h2 class="ax-card__title">Corner Ribbons</h2>
                <p class="ax-card__subtitle">Diagonal banners pinned to the top-start or top-end of a card, in any tone.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--ax-space-5);">

                <!-- accent / top-end -->
                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-end">Featured</span>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Brass Task Light</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Lighting · Aperture Goods</div>
                    <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-lg);color:var(--ax-text-strong);margin-top:var(--ax-space-3);">$182.00</div>
                  </div>
                </article>

                <!-- success / top-end -->
                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-end ax-ribbon--success">In stock</span>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Matte Ceramic Mug</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Drinkware · 312 on hand</div>
                    <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-lg);color:var(--ax-text-strong);margin-top:var(--ax-space-3);">$24.00</div>
                  </div>
                </article>

                <!-- danger / top-start -->
                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-start ax-ribbon--danger">Sold out</span>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Linen Pinboard</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Storage · backorder</div>
                    <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-lg);color:var(--ax-text-strong);margin-top:var(--ax-space-3);">$58.00</div>
                  </div>
                </article>

                <!-- warning / top-start -->
                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-start ax-ribbon--warning">Low stock</span>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Walnut Monitor Riser</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Desk · 41 left</div>
                    <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-lg);color:var(--ax-text-strong);margin-top:var(--ax-space-3);">$96.00</div>
                  </div>
                </article>

              </div>
            </div>
          </section>

          <!-- ───── Edge / flag ribbons ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Edge and flag ribbons">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Inset tab</span>
                <h2 class="ax-card__title">Edge &amp; Flag</h2>
                <p class="ax-card__subtitle">A flat tab notched into the leading edge.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-5);">

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;min-height:118px;">
                <span class="ax-ribbon ax-ribbon--edge">New</span>
                <div class="ax-card__body" style="padding-top:var(--ax-space-8);">
                  <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Stoneware Carafe</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Just landed</div>
                </div>
              </article>

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;min-height:118px;">
                <span class="ax-ribbon ax-ribbon--edge ax-ribbon--success">−20%</span>
                <div class="ax-card__body" style="padding-top:var(--ax-space-8);">
                  <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Oak Pen Tray</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Summer sale</div>
                </div>
              </article>

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;min-height:118px;">
                <span class="ax-ribbon ax-ribbon--flag ax-ribbon--warning">Beta</span>
                <div class="ax-card__body" style="padding-top:var(--ax-space-8);">
                  <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Insights API</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Preview release</div>
                </div>
              </article>

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;min-height:118px;">
                <span class="ax-ribbon ax-ribbon--flag ax-ribbon--danger">Hot</span>
                <div class="ax-card__body" style="padding-top:var(--ax-space-8);">
                  <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Grid Notebook A5</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Best seller</div>
                </div>
              </article>

            </div>
          </section>

          <!-- ───── Pill ribbons ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Pill ribbons">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Floating tag</span>
                <h2 class="ax-card__title">Pill Ribbons</h2>
                <p class="ax-card__subtitle">A rounded chip floated into the top-end corner.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                <span class="ax-ribbon ax-ribbon--pill">Pro</span>
                <div class="ax-card__body">
                  <div class="ax-cluster" style="justify-content:space-between;flex-wrap:nowrap;">
                    <div>
                      <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Team plan</div>
                      <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Up to 25 seats</div>
                    </div>
                    <div class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-xl);color:var(--ax-text-strong);">$49<small style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-sans);">/mo</small></div>
                  </div>
                </div>
              </article>

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                <span class="ax-ribbon ax-ribbon--pill ax-ribbon--success">Recommended</span>
                <div class="ax-card__body">
                  <div class="ax-cluster" style="justify-content:space-between;flex-wrap:nowrap;">
                    <div>
                      <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Business plan</div>
                      <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">SSO + audit log</div>
                    </div>
                    <div class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-xl);color:var(--ax-text-strong);">$99<small style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);font-family:var(--ax-font-sans);">/mo</small></div>
                  </div>
                </div>
              </article>

              <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                <span class="ax-ribbon ax-ribbon--pill ax-ribbon--warning">Trial ends soon</span>
                <div class="ax-card__body">
                  <div class="ax-cluster" style="justify-content:space-between;flex-wrap:nowrap;">
                    <div>
                      <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Enterprise</div>
                      <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">3 days remaining</div>
                    </div>
                    <div class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-md);color:var(--ax-text-muted);">Custom</div>
                  </div>
                </div>
              </article>

            </div>
          </section>

          <!-- ───── On media ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Ribbons over media">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">In context</span>
                <h2 class="ax-card__title">Over Media Tiles</h2>
                <p class="ax-card__subtitle">Ribbons layer cleanly above an image or gradient thumbnail.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--ax-space-5);">

                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-end">Editor’s pick</span>
                  <div style="height:120px;background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-cyan) 60%,transparent),color-mix(in oklab,var(--ax-viz-violet) 55%,transparent));display:grid;place-items:center;">
                    <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:.85;"><path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"/></svg>
                  </div>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Aurora wallpaper pack</div>
                    <div class="ax-rating ax-rating--sm" role="img" aria-label="4.8 out of 5" style="margin-top:6px;">
                      <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" aria-hidden="true" style="fill:currentColor;"><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"/></svg>
                      <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" aria-hidden="true" style="fill:currentColor;"><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"/></svg>
                      <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" aria-hidden="true" style="fill:currentColor;"><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"/></svg>
                      <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" aria-hidden="true" style="fill:currentColor;"><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"/></svg>
                      <svg class="ax-rating__star ax-rating__star--half" viewBox="0 0 24 24" aria-hidden="true" style="fill:currentColor;"><path d="M12 1a.993 .993 0 0 1 .823 .443l.067 .116l2.852 5.781l6.38 .925c.741 .108 1.08 .94 .703 1.526l-.07 .095l-.078 .086l-4.624 4.499l1.09 6.355a1.001 1.001 0 0 1 -1.249 1.135l-.101 -.035l-.101 -.046l-5.693 -3l-5.706 3c-.105 .055 -.212 .09 -.32 .106l-.106 .01a1.003 1.003 0 0 1 -1.038 -1.06l.013 -.11l1.09 -6.355l-4.623 -4.5a1.001 1.001 0 0 1 .328 -1.647l.113 -.036l.114 -.023l6.379 -.925l2.853 -5.78a.968 .968 0 0 1 .904 -.56zm0 3.274v12.476a1 1 0 0 1 .239 .029l.115 .036l.112 .05l4.363 2.299l-.836 -4.873a1 1 0 0 1 .136 -.696l.07 -.099l.082 -.09l3.546 -3.453l-4.891 -.708a1 1 0 0 1 -.62 -.344l-.073 -.097l-.06 -.106l-2.183 -4.424z"/></svg>
                      <span class="ax-rating__value ax-num">4.8</span>
                    </div>
                  </div>
                </article>

                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--pill ax-ribbon--success">Free</span>
                  <div style="height:120px;background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-emerald) 55%,transparent),color-mix(in oklab,var(--ax-viz-cyan) 50%,transparent));display:grid;place-items:center;">
                    <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:.85;"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 21v-16a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/></svg>
                  </div>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Starter template</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">MIT licensed</div>
                  </div>
                </article>

                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-start ax-ribbon--warning">Updated</span>
                  <div style="height:120px;background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-amber) 55%,transparent),color-mix(in oklab,var(--ax-viz-pink) 50%,transparent));display:grid;place-items:center;">
                    <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:.85;"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
                  </div>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Changelog digest</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">v2.4 just shipped</div>
                  </div>
                </article>

                <article class="ax-card ax-card--compact" style="position:relative;overflow:hidden;">
                  <span class="ax-ribbon ax-ribbon--corner ax-ribbon--top-end ax-ribbon--danger">−40%</span>
                  <div style="height:120px;background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-pink) 55%,transparent),color-mix(in oklab,var(--ax-viz-violet) 50%,transparent));display:grid;place-items:center;">
                    <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:.85;"><path d="M9 14l6 -6"/><path d="M9.5 8.5m-.5 0a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0"/><path d="M14.5 13.5m-.5 0a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0"/><path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7a2.2 2.2 0 0 0 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1a2.2 2.2 0 0 0 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1"/></svg>
                  </div>
                  <div class="ax-card__body">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Pro upgrade</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;">Annual offer</div>
                  </div>
                </article>

              </div>
            </div>
          </section>

        </div>

{% endblock %}