rootring

In the snippets below, replace YOUR-SITE with the URL rootring should use for your blog. Usually this is your homepage. If your ring links live on a separate public page, use that page's URL instead.

Verification checks that your ring links are visible on the public page rootring should use for your blog.

Some snippets are more visibly branded than others. If you want the controls to read clearly as part of a webring, choose one with a visible rootring label.

This replaces YOUR-SITE in the examples on this page.

Minimal

Low-friction snippets with clearer structure and less visual noise.

RAIL STRIP

Best for shared footers where the ring should feel built in.

Show code


<nav class="webring webring--rail" aria-label="Webring">
  <span class="label"><a href="https://rootr.ing/">rootring</a></span>
  <div class="links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</nav>

<style>
  .webring--rail {
    margin-top: .5rem;
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: .4rem;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font: inherit;
  }
  .webring--rail .label {
    opacity: .75;
    letter-spacing: .04em;
    text-transform: lowercase;
    font-size: .84rem;
  }
  .webring--rail .links {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
  }
  .webring--rail a {
    text-decoration: none;
  }
  .webring--rail a:hover {
    text-decoration: underline;
  }
</style>

CALLOUT LINE

Works well in text-heavy layouts where the ring should read like a short note.

rootring

Show code


<div class="webring webring--callout" aria-label="Webring">
  <span class="callout-label"><a href="https://rootr.ing/">rootring</a></span>
  <span class="callout-sep" aria-hidden="true">→</span>
  <nav class="callout-links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <span aria-hidden="true">·</span>
    <a href="https://rootr.ing/random">Random</a>
    <span aria-hidden="true">·</span>
    <a href="https://rootr.ing/directory">Ring</a>
    <span aria-hidden="true">·</span>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </nav>
</div>

<style>
  .webring--callout {
    margin-top: .5rem;
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
    font: inherit;
  }

  .webring--callout .callout-label {
    font-weight: 700;
    letter-spacing: .03em;
  }

  .webring--callout .callout-sep {
    opacity: .55;
  }

  .webring--callout .callout-links {
    display: inline-flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .webring--callout .callout-links a {
    text-decoration: none;
  }

  .webring--callout .callout-links a:hover {
    text-decoration: underline;
  }

  .webring--callout .callout-links span {
    opacity: .5;
  }
</style>

CENTERED BAR

Useful on homepages or ring pages where the links should sit on their own line.

rootring

Show code


<div class="webring webring--center-wrap" aria-label="Webring">
  <nav class="webring--center">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </nav>
  <div class="label"><a href="https://rootr.ing/">rootring</a></div>
</div>

<style>
  .webring--center-wrap {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: .35rem;
    font: inherit;
    text-align: center;
  }
  .webring--center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    padding: .5rem .25rem .15rem;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  }
  .webring--center a {
    text-decoration: none;
  }
  .webring--center a:hover {
    text-decoration: underline;
  }
  .webring--center-wrap .label {
    opacity: .74;
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: lowercase;
  }
</style>

ICON RAIL

Fits best in slim footers or low-profile nav areas where space is tight.

Show code


<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
/>

<nav class="webring webring--icon-rail" aria-label="Webring">
  <span class="rail-label"><a href="https://rootr.ing/">rootring</a></span>

  <a href="https://rootr.ing/prev?site=YOUR-SITE" aria-label="Previous site in the ring">
    <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
    <span>Prev</span>
  </a>

  <a href="https://rootr.ing/random" aria-label="Random site in the ring">
    <i class="fa-solid fa-shuffle" aria-hidden="true"></i>
    <span>Random</span>
  </a>

  <a href="https://rootr.ing/directory" aria-label="Browse the ring">
    <i class="fa-solid fa-list" aria-hidden="true"></i>
    <span>Ring</span>
  </a>

  <a href="https://rootr.ing/next?site=YOUR-SITE" aria-label="Next site in the ring">
    <span>Next</span>
    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
  </a>
</nav>

<style>
  .webring--icon-rail {
    margin-top: .5rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .7rem;
    padding-top: .35rem;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font: inherit;
  }

  .webring--icon-rail .rail-label {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
  }

  .webring--icon-rail a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
  }

  .webring--icon-rail a:hover {
    text-decoration: underline;
  }

  .webring--icon-rail i {
    font-size: .9em;
    opacity: .9;
  }
</style>

TWO-ROW TEXT

Works well in narrow columns and small content areas.

Show code


<nav class="webring webring--tworow" aria-label="Webring">
  <div class="labelrow">
    <a class="brand" href="https://rootr.ing/">rootring</a>
    <span class="slash">/</span>
    <span class="sub">webring nav</span>
  </div>
  <div class="linkrow">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <span>·</span>
    <a href="https://rootr.ing/random">Random</a>
    <span>·</span>
    <a href="https://rootr.ing/directory">Ring</a>
    <span>·</span>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</nav>

<style>
  .webring--tworow {
    margin-top: .5rem;
    display: inline-flex;
    flex-direction: column;
    gap: .22rem;
    font: inherit;
  }

  .webring--tworow .labelrow,
  .webring--tworow .linkrow {
    display: flex;
    gap: .45rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .webring--tworow .labelrow {
    font-size: .84rem;
  }

  .webring--tworow .brand {
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: lowercase;
    opacity: .84;
  }

  .webring--tworow .brand:hover {
    opacity: 1;
    text-decoration: underline;
  }

  .webring--tworow .sub,
  .webring--tworow .slash,
  .webring--tworow span {
    opacity: .6;
  }

  .webring--tworow a {
    text-decoration: none;
  }

  .webring--tworow .linkrow a:hover {
    text-decoration: underline;
  }
</style>

Back to top

Buttons

More UI-like controls that still read clearly as part of rootring.

OUTLINE BUTTONS

Fits clean blog footers and simple site chrome.

Show code


<nav class="webring webring--outline" aria-label="Webring">
  <a class="brand" href="https://rootr.ing/">rootring</a>
  <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
  <a href="https://rootr.ing/random">Random</a>
  <a href="https://rootr.ing/directory">Ring</a>
  <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
</nav>

<style>
  .webring--outline {
    margin-top: .5rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font: inherit;
  }

  .webring--outline a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: .25rem .65rem;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
    text-decoration: none;
    background: transparent;
  }

  .webring--outline .brand {
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: lowercase;
    opacity: .9;
  }

  .webring--outline a:hover {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
</style>

SEGMENTED TOOLBAR

Good for compact headers, footers, and ring pages that want one unified control.

Show code


<nav class="webring webring--seg" aria-label="Webring">
  <span class="brand"><a href="https://rootr.ing/">rootring</a></span>
  <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
  <a href="https://rootr.ing/random">Random</a>
  <a href="https://rootr.ing/directory">Directory</a>
  <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
</nav>

<style>
  .webring--seg {
    margin-top: .5rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
    border-radius: 999px;
    overflow: hidden;
    font: inherit;
    background: color-mix(in srgb, currentColor 6%, transparent);
  }

  .webring--seg .brand,
  .webring--seg a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: .38rem .78rem;
  }

  .webring--seg .brand {
    border-right: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: lowercase;
    white-space: nowrap;
    opacity: .9;
  }

  .webring--seg a {
    text-decoration: none;
    border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    white-space: nowrap;
  }

  .webring--seg a:last-child {
    border-right: 0;
  }

  .webring--seg a:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }

  .webring--seg a:focus-visible {
    outline-offset: -2px;
  }
</style>

ICON TOOLBAR

Best where the ring should feel like a single compact control bar.

Show code


<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
/>

<div class="webring webring--icon-toolbar" aria-label="Webring">
  <a class="tool prev" href="https://rootr.ing/prev?site=YOUR-SITE" aria-label="Previous site in the ring">
    <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
    <span>Prev</span>
  </a>

  <a class="tool random" href="https://rootr.ing/random" aria-label="Random site in the ring">
    <i class="fa-solid fa-shuffle" aria-hidden="true"></i>
    <span>Random</span>
  </a>

  <span class="brand"><a href="https://rootr.ing/">rootring</a></span>

  <a class="tool ring" href="https://rootr.ing/directory" aria-label="Browse the ring">
    <i class="fa-solid fa-list" aria-hidden="true"></i>
    <span>Ring</span>
  </a>

  <a class="tool next" href="https://rootr.ing/next?site=YOUR-SITE" aria-label="Next site in the ring">
    <span>Next</span>
    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>

<style>
  .webring--icon-toolbar {
    margin-top: .5rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font: inherit;
  }

  .webring--icon-toolbar .tool,
  .webring--icon-toolbar .brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .42rem .7rem;
    min-height: 2.2rem;
  }

  .webring--icon-toolbar .tool {
    text-decoration: none;
  }

  .webring--icon-toolbar .tool + .tool,
  .webring--icon-toolbar .brand + .tool,
  .webring--icon-toolbar .tool + .brand {
    border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }

  .webring--icon-toolbar .tool:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }

  .webring--icon-toolbar .brand {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    background: color-mix(in srgb, currentColor 5%, transparent);
  }

  .webring--icon-toolbar i {
    font-size: .9em;
  }
</style>

2×2 GRID BLOCK

Works well on ring pages and small boxes that need a more obvious frame.

rootring

Show code


<div class="webring webring--gridblock" aria-label="Webring">
  <div class="gridblock-title"><a href="https://rootr.ing/">rootring</a></div>
  <nav class="gridblock-nav">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
  </nav>
</div>

<style>
  .webring--gridblock {
    margin-top: .5rem;
    display: inline-block;
    border: 1px solid currentColor;
    padding: .45rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
    font: inherit;
  }

  .webring--gridblock .gridblock-title {
    margin-bottom: .45rem;
    padding-bottom: .3rem;
    border-bottom: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .82;
  }

  .webring--gridblock .gridblock-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
  }

  .webring--gridblock .gridblock-nav a {
    display: inline-block;
    text-align: center;
    padding: .38rem .55rem;
    text-decoration: none;
    border: 1px solid currentColor;
    background: transparent;
  }

  .webring--gridblock .gridblock-nav a:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
</style>

NEON

Good for ring pages or stylized layouts where the webring should read like a small glowing sign.

rootring

Show code


<div class="webring webring--neon" aria-label="Webring">
  <div class="webring--neon-head"><a href="https://rootr.ing/">rootring</a></div>
  <nav class="webring--neon-links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Directory</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </nav>
</div>

<style>
  .webring--neon {
    margin-top: .5rem;
    display: inline-flex;
    flex-direction: column;
    gap: .7rem;
    padding: .8rem .9rem .9rem;
    border: 2px solid currentColor;
    border-radius: .75rem;
    background: color-mix(in srgb, currentColor 4%, transparent);
    box-shadow:
      0 0 0.2rem color-mix(in srgb, currentColor 32%, transparent),
      0 0 0.8rem color-mix(in srgb, currentColor 18%, transparent);
    font: inherit;
  }

  .webring--neon-head {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .95;
    text-shadow: 0 0 0.45rem color-mix(in srgb, currentColor 28%, transparent);
  }

  .webring--neon-links {
    display: inline-flex;
    gap: .55rem;
    flex-wrap: wrap;
  }

  .webring--neon-links a {
    text-decoration: none;
    padding: .28rem .68rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    box-shadow:
      inset 0 0 0.2rem color-mix(in srgb, currentColor 14%, transparent),
      0 0 0.35rem color-mix(in srgb, currentColor 18%, transparent);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9em;
    white-space: nowrap;
  }

  .webring--neon-links a:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow:
      inset 0 0 0.25rem color-mix(in srgb, currentColor 18%, transparent),
      0 0 0.55rem color-mix(in srgb, currentColor 24%, transparent);
  }
</style>

Back to top

Widgets

Contained blocks for more visible placement in sidebars, footers, and ring pages.

SPLIT CARD

Good for dedicated ring sections where you want a clear label and roomy links.

rootring

webring nav

Prev Random Ring Next

Show code


<div class="webring webring--split" aria-label="Webring">
  <div class="left">
    <div class="name"><a href="https://rootr.ing/">rootring</a></div>
    <div class="note">webring nav</div>
  </div>
  <div class="right">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</div>

<style>
  .webring--split {
    margin-top: .5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .75rem .9rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font: inherit;
  }
  .webring--split .name { font-weight: 700; }
  .webring--split .note {
    opacity: .75;
    font-size: .9rem;
  }
  .webring--split .right {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
    align-items: center;
  }
  .webring--split a {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  }
  .webring--split a:hover {
    border-bottom-color: currentColor;
  }
</style>

CARD

Works well as a standalone widget on homepages, sidebars, or ring pages.

rootring

Prev Random Ring Next

Show code


<div class="webring webring--card" aria-label="Webring">
  <div class="title"><a href="https://rootr.ing/">rootring</a></div>
  <div class="links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</div>

<style>
  .webring--card {
    margin-top: .5rem;
    display: inline-block;
    padding: .75rem .85rem .7rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: .35rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
    min-width: 18rem;
  }
  .webring--card .title {
    font-weight: 700;
    margin-bottom: .45rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
    letter-spacing: .03em;
    text-transform: lowercase;
    font-size: .88rem;
  }
  .webring--card .links {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
  }
  .webring--card a {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  }
  .webring--card a:hover { border-bottom-color: currentColor; }
</style>

VERTICAL STACK

Best for narrow sidebars, profile columns, and compact ring pages.

rootring webring nav

Show code


<div class="webring webring--stack-panel" aria-label="Webring">
  <div class="stack-head">
    <span class="stack-kicker"><a href="https://rootr.ing/">rootring</a></span>
    <span class="stack-sub">webring nav</span>
  </div>
  <nav class="webring--stack">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">← Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next →</a>
  </nav>
</div>

<style>
  .webring--stack-panel {
    margin-top: .5rem;
    display: inline-flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 11rem;
    padding: .7rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: .7rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
    font: inherit;
  }

  .webring--stack-panel .stack-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
  }

  .webring--stack-panel .stack-kicker {
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: lowercase;
    opacity: .9;
  }

  .webring--stack-panel .stack-sub {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .58;
  }

  .webring--stack {
    display: inline-flex;
    flex-direction: column;
    gap: .38rem;
    align-items: stretch;
  }

  .webring--stack a {
    text-decoration: none;
    padding: .38rem .55rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: .45rem;
    background: color-mix(in srgb, currentColor 6%, transparent);
  }

  .webring--stack a:hover {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
</style>

DISCLOSURE

Good for blogs that want ring navigation available without keeping it visible all the time.

rootring open ring

Show code


<details class="webring webring--disclosure">
  <summary>
    <span class="summary-title">rootring</span>
    <span class="summary-meta">open ring</span>
  </summary>
  <nav aria-label="Webring">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </nav>
</details>

<style>
  .webring--disclosure {
    margin-top: .5rem;
    display: inline-flex;
    flex-direction: column;
    font: inherit;
  }

  .webring--disclosure summary {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    list-style: none;
    padding: .38rem .65rem;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    user-select: none;
  }

  .webring--disclosure summary::-webkit-details-marker {
    display: none;
  }

  .webring--disclosure .summary-title {
    font-size: .84rem;
    letter-spacing: .05em;
    text-transform: lowercase;
  }

  .webring--disclosure .summary-meta {
    opacity: .65;
    font-size: .8rem;
  }

  .webring--disclosure summary::after {
    content: "▾";
    margin-left: .1rem;
    opacity: .72;
  }

  .webring--disclosure[open] summary::after {
    content: "▴";
  }

  .webring--disclosure nav {
    display: inline-flex;
    flex-direction: column;
    gap: .28rem;
    margin-top: .45rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .75rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
    min-width: 11rem;
  }

  .webring--disclosure nav a {
    text-decoration: none;
    padding: .16rem 0;
  }

  .webring--disclosure nav a:hover {
    text-decoration: underline;
  }
</style>

RIBBON TAG

Fits headers, post footers, and layouts that want a small labeled accent.

rootring

Show code


<div class="webring webring--ribbon" aria-label="Webring">
  <div class="ribbon-tag"><a href="https://rootr.ing/">rootring</a></div>
  <nav class="ribbon-links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </nav>
</div>

<style>
  .webring--ribbon {
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    font: inherit;
  }

  .webring--ribbon .ribbon-tag {
    padding: .22rem .7rem .22rem .6rem;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: .35rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .webring--ribbon .ribbon-links {
    display: inline-flex;
    gap: .7rem;
    flex-wrap: wrap;
  }

  .webring--ribbon .ribbon-links a {
    text-decoration: none;
  }

  .webring--ribbon .ribbon-links a:hover {
    text-decoration: underline;
  }
</style>

STICKER BADGE

Fits playful personal sites and pages that lean handmade or zine-like.

rootring

prev rand ring next

Show code


<div class="webring webring--sticker" aria-label="Webring">
  <div class="sticker-title"><a href="https://rootr.ing/">rootring</a></div>
  <div class="sticker-links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">prev</a>
    <a href="https://rootr.ing/random">rand</a>
    <a href="https://rootr.ing/directory">ring</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">next</a>
  </div>
</div>

<style>
  .webring--sticker {
    margin-top: .5rem;
    display: inline-block;
    padding: .7rem .85rem;
    border: 2px solid currentColor;
    border-radius: 1rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: 6px 6px 0 color-mix(in srgb, currentColor 18%, transparent);
    transform: rotate(-1deg);
  }
  .webring--sticker .sticker-title {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    opacity: .85;
    margin-bottom: .4rem;
  }
  .webring--sticker .sticker-links {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
  }
  .webring--sticker a {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }
  .webring--sticker a:hover { opacity: .85; }
</style>

Back to top

Retro and old web

More opinionated styles for older web aesthetics and intentionally visible ring UI.

OLD WEB TABLE

Fits old-web layouts and sites that already use simple table-based UI.

ROOTRING

RING


<table class="webring webring--table" role="presentation" cellspacing="0" cellpadding="0">
  <tr>
    <td class="labelcell"><a href="https://rootr.ing/">ROOTRING</a></td>
    <td><a href="https://rootr.ing/prev?site=YOUR-SITE">PREV</a></td>
    <td><a href="https://rootr.ing/random">RANDOM</a></td>
    <td><a href="https://rootr.ing/directory">RING</a></td>
    <td><a href="https://rootr.ing/next?site=YOUR-SITE">NEXT</a></td>
  </tr>
</table>

<style>
  .webring--table {
    margin-top: .5rem;
    border: 2px solid currentColor;
    border-collapse: collapse;
    font: inherit;
    background: transparent;
  }
  .webring--table td {
    border: 1px solid currentColor;
    padding: .2rem .45rem;
    background: color-mix(in srgb, currentColor 4%, transparent);
  }
  .webring--table .labelcell {
    font-weight: 700;
    letter-spacing: .06em;
  }
  .webring--table a { text-decoration: none; }
  .webring--table a:hover { text-decoration: underline; }
</style>

DOS PANEL

Best for terminal-flavored pages and deliberately retro interfaces.

[ ROOTRING ] PREV RANDOM RING NEXT

Show code


<div class="webring webring--dos" aria-label="Webring">
  <span class="label"><a href="https://rootr.ing/">[ ROOTRING ]</a></span>
  <a href="https://rootr.ing/prev?site=YOUR-SITE">PREV</a>
  <a href="https://rootr.ing/random">RANDOM</a>
  <a href="https://rootr.ing/directory">RING</a>
  <a href="https://rootr.ing/next?site=YOUR-SITE">NEXT</a>
</div>

<style>
  .webring--dos {
    margin-top: .5rem;
    display: inline-flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .45rem .55rem;
    border: 2px solid currentColor;
    background: color-mix(in srgb, currentColor 4%, transparent);
    font:
      0.95rem ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }
  .webring--dos .label {
    opacity: .8;
    letter-spacing: .04em;
  }
  .webring--dos a {
    text-decoration: none;
    padding: .08rem .35rem;
    border: 1px solid currentColor;
  }
  .webring--dos a:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
</style>

TERMINAL LIST

Good for text-heavy pages that want the ring to read like command-line navigation.

rootring
├─ prev
├─ random
├─ ring
└─ next

Show code


<pre class="webring webring--terminal" aria-label="Webring"><code><a href="https://rootr.ing/">rootring</a>
├─ <a href="https://rootr.ing/prev?site=YOUR-SITE">prev</a>
├─ <a href="https://rootr.ing/random">random</a>
├─ <a href="https://rootr.ing/directory">ring</a>
└─ <a href="https://rootr.ing/next?site=YOUR-SITE">next</a></code></pre>

<style>
  .webring--terminal {
    margin-top: .5rem;
    margin: 0;
    padding: .8rem .9rem;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    font:
      0.92rem ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
    line-height: 1.55;
  }
  .webring--terminal code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
  }
  .webring--terminal a {
    color: inherit;
    text-decoration: underline;
  }
  .webring--terminal a:hover {
    opacity: .85;
  }
</style>

PIXEL

Works well on chunky retro themes where the ring should feel loud and playful.

ROOTRING WEBRING NAV

Show code


<div class="webring webring--pixel-panel" aria-label="Webring">
  <div class="topline">
    <span class="brand"><a href="https://rootr.ing/">ROOTRING</a></span>
    <span class="sub">WEBRING NAV</span>
  </div>
  <nav class="webring--pixel">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">PREV</a>
    <a href="https://rootr.ing/random">RAND</a>
    <a href="https://rootr.ing/directory">RING</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">NEXT</a>
  </nav>
</div>

<style>
  .webring--pixel-panel {
    margin-top: .5rem;
    display: inline-flex;
    flex-direction: column;
    gap: .45rem;
    padding: .55rem .6rem .65rem;
    border: 2px solid currentColor;
    background: color-mix(in srgb, currentColor 6%, transparent);
    box-shadow: 4px 4px 0 color-mix(in srgb, currentColor 28%, transparent);
    font:
      0.95rem ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }

  .webring--pixel-panel .topline {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .8rem;
    align-items: baseline;
    padding-bottom: .35rem;
    border-bottom: 2px dotted color-mix(in srgb, currentColor 45%, transparent);
  }

  .webring--pixel-panel .brand {
    letter-spacing: .08em;
  }

  .webring--pixel-panel .sub {
    font-size: .82rem;
    opacity: .72;
    letter-spacing: .05em;
  }

  .webring--pixel {
    display: inline-flex;
    gap: .45rem;
    flex-wrap: wrap;
  }

  .webring--pixel a {
    text-decoration: none;
    padding: .18rem .45rem;
    border: 2px solid currentColor;
    border-radius: 0;
    background: color-mix(in srgb, currentColor 9%, transparent);
    box-shadow: 2px 2px 0 color-mix(in srgb, currentColor 30%, transparent);
  }

  .webring--pixel a:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }

  .webring--pixel a:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 color-mix(in srgb, currentColor 30%, transparent);
  }
</style>

MARQUEE BAR

Fits nostalgic pages where the ring should feel like part of the decoration.

rootring // Prev · Random · Ring · Next

Show code


<div class="webring webring--marquee" aria-label="Webring">
  <span class="title"><a href="https://rootr.ing/">rootring</a> //</span>
  <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
  <span class="sep">·</span>
  <a href="https://rootr.ing/random">Random</a>
  <span class="sep">·</span>
  <a href="https://rootr.ing/directory">Ring</a>
  <span class="sep">·</span>
  <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
</div>

<style>
  .webring--marquee {
    margin-top: .5rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    border: 1px dashed currentColor;
    background: color-mix(in srgb, currentColor 4%, transparent);
    font:
      0.92rem ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }
  .webring--marquee .title {
    font-weight: 700;
    letter-spacing: .06em;
  }
  .webring--marquee .sep {
    opacity: .55;
  }
  .webring--marquee a {
    text-decoration: none;
  }
  .webring--marquee a:hover {
    text-decoration: underline;
  }
</style>

Back to top

Want to style it yourself?

You can use any snippet here as a starting point, or write your own. The important part is that the links stay visible on the public page rootring should use for your blog, and that the site=YOUR-SITE value matches that page URL.

<nav aria-label="Webring">
  <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
  <a href="https://rootr.ing/random">Random</a>
  <a href="https://rootr.ing/directory">Directory</a>
  <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
</nav>

Snippet gallery

Minimal

RAIL STRIP

CALLOUT LINE

CENTERED BAR

ICON RAIL

TWO-ROW TEXT

Buttons

OUTLINE BUTTONS

SEGMENTED TOOLBAR

ICON TOOLBAR

2×2 GRID BLOCK

NEON

Widgets

SPLIT CARD

CARD

VERTICAL STACK

DISCLOSURE

RIBBON TAG

STICKER BADGE

Retro and old web

OLD WEB TABLE

DOS PANEL

TERMINAL LIST

PIXEL

MARQUEE BAR

Want to style it yourself?