Lil Regie's front-end workshop


3-column layout

Force the contents of the selected element to spill over three columns

Example

0 375 640 768 1024

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
<ul class="list_icons" data-layout-columns="3">
  <li>
    <img src="https://placekitten.com/300/300" width="300" height="300" alt="" loading="lazy">
    <div>
      <p>
        <b>It’s so easy.</b><br>
        Set your event up in no time. No training required - just enter the details, test and publish!
      </p>
      <p>
        Need more convincing?
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/200/200" width="200" height="200" alt="" loading="lazy">
    <div>
      <p>
        <b>Flexible ticket options.</b><br>
        Specify different ticket types (eg early bird, member price, student price).
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/300/300" width="300" height="300" alt="" loading="lazy">
    <div>
      <p>
        <b>Single or multi events</b><br>
        Whether have a stand-alone event or one that encompasses a range of events; Lil Regie can handle them all effortlessly.
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/200/200" width="200" height="200" alt="" loading="lazy">
    <div>
      <p>
        <b>Capacities & dates</b><br>
        Limit the quantity of tickets available or let them run wild! Set early bird and standard pricing.
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/300/300" width="300" height="300" alt="" loading="lazy">
    <div>
      <p>
        <b>Collect information</b><br>
        You choose which information to capture as part of the booking process. Add new sections and custom fields to your registration form.
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/200/200" width="200" height="200" alt="" loading="lazy">
    <div>
      <p>
        <b>Private events</b><br>
        Lock your event down so only people with a unique password can access it.
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/200/200" width="200" height="200" alt="" loading="lazy">
    <div>
      <p>
        <b>Use it for online events</b><br>
        Link your event to your favourite online conferencing platform.
      </p>
    </div>
  </li>
</ul>

Source files