Testimonials list

A collection of testimonials from various Lil Regie customers. Only shows a random one on page load, using the provided script.

Example

Open in a new window

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<ul class="list_testimonials" data-controller="random-testimonial" data-total="5">
  <li>
    <figure>
      <blockquote>
        <p>Lil Regie is a simple, yet effective registration tool. We highly recommend Lil Regie to anyone requiring an online event registration system.</p>
      </blockquote>
      <figcaption>
        <cite>
          <a href="https://www.limeandsoda.co.nz/">
            <img src="https://placekitten.com/200/80" width="200" height="80" alt="Lime and Soda" loading="lazy">
          </a>
        </cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <blockquote>
        <p>We love Lil Regie</p>
      </blockquote>
      <figcaption>
        <cite>
          <a href="https://www.webstock.org.nz/">
            <img src="https://placekitten.com/120/160" width="120" height="160" alt="Webstock" loading="lazy">
          </a>
        </cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <blockquote>
        <p>We couldn't be happier with Lil Regie. Our event was so easy to set up.</p>
      </blockquote>
      <figcaption>
        <cite>
          <a href="https://www.trademe.co.nz/">
            <img src="https://placekitten.com/120/80" width="120" height="80" alt="Trade me" loading="lazy">
          </a>
        </cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <blockquote>
        <p>Xero uses Lil Regie everytime we create events.</p>
      </blockquote>
      <figcaption>
        <cite>
          <a href="https://www.xero.com/">
            <img src="https://placekitten.com/120/120" width="120" height="120" alt="Xero" loading="lazy">
          </a>
        </cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <blockquote>
        <p>Venues Wellington would be lost without Lil Regie's excellent event registration service.</p>
      </blockquote>
      <figcaption>
        <cite>
          <a href="https://www.venueswellington.com/">
            <img src="https://placekitten.com/200/120" width="200" height="120" alt="Venues Wellington" loading="lazy">
          </a>
        </cite>
      </figcaption>
    </figure>
  </li>
</ul>

Usage notes

No elements are allowed between the <ol> or <ul> and <li> elements.
Extends the Stripped list
Ensure there is no whitespace around each paragraph in the <blockquote>.
This element will display all quotes in order, unless the data-display attribute is used on the host element. The value of this attribute is the 0-based index of the desired quote to display. Only one of the first ten items can be displayed in this way.
The data-total attribute must reflect the total number of testimonials, so that the JavaScript helper has quick way to determine the max index.

Source files