Skip to content

Random Content

<quiet-random-content> stable since 1.0

Randomly displays one or more elements from a list.

Perfect for showcasing rotating testimonials, featured products, helpful tips, or inspirational quotes, keeping content fresh and engaging without overwhelming users or repeating the same material.

"The new scratching post is perfect! I sharpen my claws on it every morning." – Meowy McGee
"Those catnip toys make me go absolutely bonkers! – Princess Mittens
"Finally, a food that meets my refined palate." – Sir Fluffington
"The automatic feeder ensures my 3 AM breakfast is always on time. – Shadow
"One day I'll catch that red dot, mark my words." – Captain Paws
"I've been sleeping 20 hours a day instead of my usual 18!" – Luna Belle
"I no longer need to demand fresh water from the tap every hour." – Duchess Whiskertons
"I survey my kingdom from the top of the fridge daily." – King Mewington III
Randomize 
<quiet-random-content mode="unique" style="display: flex; flex-direction: column; gap: 1rem;" id="random__overview">
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "The new scratching post is perfect! I sharpen my claws on it every morning."
      <cite>– Meowy McGee</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "Those catnip toys make me go absolutely bonkers!
      <cite>– Princess Mittens</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "Finally, a food that meets my refined palate."
      <cite>– Sir Fluffington</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1735820474275-dd0ff4f28d71?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "The automatic feeder ensures my 3 AM breakfast is always on time.
      <cite>– Shadow</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1504384558400-c1347a7bd18f?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "One day I'll catch that red dot, mark my words."
      <cite>– Captain Paws</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "I've been sleeping 20 hours a day instead of my usual 18!"
      <cite>– Luna Belle</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "I no longer need to demand fresh water from the tap every hour."
      <cite>– Duchess Whiskertons</cite>
    </div>
  </quiet-card>
  <quiet-card class="quote">
    <quiet-avatar image="https://images.unsplash.com/photo-1615497001839-b0a0eac3274c?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
    <div>
      "I survey my kingdom from the top of the fridge daily."
      <cite>– King Mewington III</cite>
    </div>
  </quiet-card>  
</quiet-random-content>

<quiet-button>Randomize</quiet-button>

<script>
  const randomContent = document.getElementById('random__overview');
  const button = randomContent.nextElementSibling;

  button.addEventListener('click', () => {
    randomContent.randomize();
  });
</script>

<style>
  #random__overview {
    max-width: 420px;
    margin-block-end: 1.5rem;

    quiet-card::part(body) {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      align-items: center;
      font-size: 0.9375em;
    }

    .quote {
      quiet-avatar {
        --size: 5rem;
        flex-shrink: 0;
      }

      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      cite {
        display: block;
        text-align: right;
        font-size: 0.875rem;
        color: #666;
        margin-top: 0.5rem;
      }
    }
  }
</style>

Examples Jump to heading

Providing content Jump to heading

You can provide virtually any type of HTML element, as long as they are direct descendants. Simply slot the elements into the host as shown below.

The host element uses display: contents by default, which allows parent styles to pass through to the child elements, essentially making the host element "invisible" from a layout perspective. 

<quiet-random-content>
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
</quiet-random-content>

Setting the number of items Jump to heading

Use the items attribute to display multiple random items at once. This is useful for showing a rotating selection of content like featured products or testimonials.

1
2
3
4
5
6
7
8
9
10
 
<div id="random__items">
  <quiet-number-field label="Items" value="2" min="1" max="10"></quiet-number-field>

  <quiet-random-content items="2">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </quiet-random-content>
</div>

<script>
  const container = document.getElementById('random__items');
  const numberField = container.querySelector('quiet-number-field');
  const randomContent = container.querySelector('quiet-random-content');

  numberField.addEventListener('input', () => {
    randomContent.items = numberField.value;
  });
</script>

<style>
  #random__items {
    quiet-number-field {
      max-width: 200px;
      margin-block-end: 1.5rem;
    }

    quiet-random-content {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: var(--quiet-primary-fill-mid);
      border-radius: var(--quiet-border-radius-md);
      color: var(--quiet-neutral-text-on-mid);
      font-size: 1.5rem;
      font-weight: var(--quiet-font-weight-semibold);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>

Changing the mode Jump to heading

Use the mode attribute to control how items are selected. The default mode is unique, which ensures different items are shown each time you call randomize(), when possible. This is usually the best option when random items are dynamically updated.

For true randomization, set it to random. This will lead to an occasional "duplicate" but works well for one-time randomizing, e.g. on page load.

1
2
3
4
 Randomize 
<div id="random__mode">
  <quiet-random-content mode="random">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </quiet-random-content>

  <quiet-button>Randomize</quiet-button>
</div>

<script>
  const container = document.getElementById('random__mode');
  const randomContent = container.querySelector('quiet-random-content');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    randomContent.randomize();
  });
</script>

<style>
  #random__mode {
    quiet-random-content {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-block-end: 1.5rem;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: var(--quiet-primary-fill-mid);
      border-radius: var(--quiet-border-radius-md);
      color: var(--quiet-neutral-text-on-mid);
      font-size: 1.5rem;
      font-weight: var(--quiet-font-weight-semibold);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>

You can also set the mode to sequence to cycle through items in DOM order. Each time you call randomize(), the component advances to the next set of items in the sequence.

1
2
3
4
5
6
7
8
9
 Next Set 
<div id="random__sequential">
  <quiet-random-content mode="sequence" items="3">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
  </quiet-random-content>

  <quiet-button>Next Set</quiet-button>
</div>

<script>
  const container = document.getElementById('random__sequential');
  const randomContent = container.querySelector('quiet-random-content');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    randomContent.randomize();
  });
</script>

<style>
  #random__sequential {
    quiet-random-content {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      margin-block-end: 1.5rem;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: var(--quiet-primary-fill-mid);
      border-radius: var(--quiet-border-radius-md);
      color: var(--quiet-neutral-text-on-mid);
      font-size: 1.5rem;
      font-weight: var(--quiet-font-weight-semibold);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>

Styling the container Jump to heading

The component uses display: contents by default, but you can override this behavior and use a flex or grid layout if you prefer.

An orange kitten meows while perched on a stone wall A multicolored cat walking through the grass stops to look at the camera A white fluffy kitten lays comfortably on the arm of a chair A gray tabby lays in a bed and looks out past the camera A black and white kitten lays on its bed and looks at the camera A young gray tabby lays on the steps and yawns A gray cat lays in the light of a window at night A Himalayan cat with bright blue eyes smells the air A tabby looks into the distance on a blue sky backdrop An orange and white cat lays in a wicker basket 
<quiet-random-content items="4" id="random__styling">
  <img 
    src="https://images.unsplash.com/photo-1628612380382-e6204e135307?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="An orange kitten meows while perched on a stone wall"
  >
  <img 
    src="https://images.unsplash.com/photo-1595252849939-1ec8070a354a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A multicolored cat walking through the grass stops to look at the camera"
  >
  <img 
    src="https://images.unsplash.com/photo-1583399704033-3db671c65f5c?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A white fluffy kitten lays comfortably on the arm of a chair"
  >
  <img 
    src="https://images.unsplash.com/photo-1625060241508-22488e1e9264?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A gray tabby lays in a bed and looks out past the camera"
  >
  <img 
    src="https://images.unsplash.com/photo-1692901573513-41cda579d689?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A black and white kitten lays on its bed and looks at the camera"
  >
  <img 
    src="https://images.unsplash.com/photo-1622273414093-27fd902ac078?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A young gray tabby lays on the steps and yawns"
  >
  <img 
    src="https://images.unsplash.com/photo-1504384558400-c1347a7bd18f?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A gray cat lays in the light of a window at night"
  >
  <img 
    src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A Himalayan cat with bright blue eyes smells the air"
  >
  <img 
    src="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="A tabby looks into the distance on a blue sky backdrop"
  >
  <img 
    src="https://images.unsplash.com/photo-1615497001839-b0a0eac3274c?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="An orange and white cat lays in a wicker basket"
  >
</quiet-random-content>

<style>
  #random__styling {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    
    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }
</style>

You can render random content inline by setting display: inline.

I'm just a cat kitten fluffy beast purr machine on a mission!

Randomize 
<div id="random__inline">
  I'm just a
  <quiet-random-content style="display: inline;" mode="unique">
    <span>cat</span>
    <span>kitten</span>
    <span>fluffy beast</span>
    <span>purr machine</span>
  </quiet-random-content>
  on a mission!
  <br><br>
  <quiet-button>Randomize</quiet-button>
</div>

<script>
  const container = document.getElementById('random__inline');
  const randomContent = container.querySelector('quiet-random-content');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    randomContent.randomize();
  });
</script>

<style>
  #random__inline {
    display: inline;
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN Self-hosted

To manually import <quiet-random-content> from the CDN, use the following code.

import 'https://cdn.quietui.org/v4.0.0/components/random-content/random-content.js';

To manually import <quiet-random-content> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path. 

import '/path/to/quiet/components/random-content/random-content.js';

Slots Jump to heading

Random Content supports the following slots. Learn more about using slots

Name Description
(default) A pool of items that will be randomly displayed. Each item must be a direct descendant of the host element.

Properties Jump to heading

Random Content has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property Description Reflects Type Default
items The number of items to show. number 1
mode The selection mode. The default is 'unique', which ensures different items are shown after calling randomize(), when possible. Use random for true randomization or sequence to show the next set of items based on their DOM position. 'unique'
'random'
'sequence' 		'unique'

Methods Jump to heading

Random Content supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name Description Arguments
randomize() Rotates the visible item(s) based on the selected mode.
Search this website Toggle dark mode View the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found