What is a webring?

A webring is a human-curated list of websites organized around a specific topic. This webring is dedicated to people interested in design systems.

How to join

  1. Read our code of conduct.
  2. Copy and paste the web component or the html code snippet somewhere on your website.
  3. Open a pull request and supply the name and URL of your website in the members.json file (you can also reach out to Ariel via email if you don’t have a GitHub account).

This webring accepts

If you think you belong here, chances are you do. People of any level of skill or experience in the industry doing design systems work are welcome. Being listed requires:

  1. An interest in design systems,
  2. A personal website, and
  3. Using our webring code somewhere on your website.

This webring does not accept

This webring is focused on people. Because of this, it is not interested in listing design system companies and professional organizations. Please refer to our code of conduct for further information about acceptable and unacceptable behavior.

List the webring on your website

1. Add the web component

Copy this html into your website to add the web component:

<design-systems-webring>
  <div class="webring-banner">
    <div class="webring-banner__header">
      <img class="webring-banner__image" width="70" height="70" src="https://design-system.club/assets/images/logo.svg" alt="" />
      <div class="webring-banner__description">
        <span>This site is part of</span>
        <h3 class="webring-banner__title">
          <a href="https://design-system.club">Design Systems Webring</a>
        </h3>
        <span>A webring with 20+ Members</span>
      </div>
      <a class="webring-banner__info" href="https://en.wikipedia.org/wiki/Webring" title="What's this?">?</a>
    </div>
    <p class="webring-banner__links">
      <a href="https://design-system.club/prev" rel="external" referrerpolicy="strict-origin" class="webring-banner__link webring-banner__link--prev" aria-label="Go to previous site">⬅️ Previous</a>
      <a href="https://design-system.club/random" rel="external" referrerpolicy="strict-origin" class="webring-banner__link webring-banner__link--random" aria-label="Go to a random site">😎 Random</a>
      <a href="https://design-system.club/next" rel="external" referrerpolicy="strict-origin" class="webring-banner__link webring-banner__link--next" aria-label="Go to next site">Next ➡️</a>
    </p>
  </div>
</design-systems-webring>
<script async src="https://design-system.club/embed.js" charset="utf-8"></script>

It will render the below banner that links to the other members:

This site is part of

Design Systems Webring

A webring with 20+ Members
?

⬅️ Previous 😎 Random Next ➡️

2. …Or, add the code snippet

If you want more control or to create a custom banner, copy and paste the below html snippet somewhere on your website:

<nav class="design-systems-webring" aria-labelledby="design-systems-webring">
  <h2 id="design-systems-webring">Design Systems Webring</h2>
  <p>This site is part of <a rel="external" href="https://design-system.club/">Design Systems Webring</a>.</p>
  <ul>
    <li><a rel="external" referrerpolicy="strict-origin" href="https://design-system.club/prev">Previous website</a></li>
    <li><a rel="external" referrerpolicy="strict-origin" href="https://design-system.club/random">Random website</a></li>
    <li><a rel="external" referrerpolicy="strict-origin" href="https://design-system.club/next">Next website</a></li>
  </ul>
</nav>

You can style the presentation of this code however you like, as long as it’s done in an accessible way. For a live example, see Ariel’s implementation.

3. Webring links placement

I don’t mind if you want people to land on your usual landing page, and then put the webring links out of the way in another page. That’s accepted as long as it’s findable within one click.

Who made this?

Ariel Salminen, with help from Max Böck’s webring project and Eric Bailey’s a11y-webring project.