1<div class="controls">
2    <?= $this->tabs ?>
3</div>
4
5<div class="content styleguide">
6    <div class="section">
7        <h1>Icinga Web 2 Design Guidelines</h1>
8
9        <ul class="toc">
10            <li><a href="#headings">Headings</a></li>
11            <li><a href="#block-content">Block Content</a></li>
12            <li><a href="#tables">Tables</a></li>
13            <li><a href="#comment-list">Comment List</a></li>
14            <li><a href="#blockquote">Blockquote</a></li>
15        </ul>
16    </div>
17
18    <div class="section">
19        <h2 id="headings">Headings</h2>
20        <h1>Header h1</h1>
21        <h2>Header h2</h2>
22        <h3>Header h3</h3>
23        <h4>Header h4</h4>
24        <h5>Header h5</h5>
25        <h6>Header h6</h6>
26    </div>
27
28    <div class="section">
29        <h2 id="block-content">Block Content</h2>
30        <h3>Paragraph</h3>
31        <p>
32            This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
33            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
34            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
35            A <a href="#">link inside a paragraph</a>.
36            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
37            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
38            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
39        </p>
40    </div>
41
42    <div class="section">
43        <h2 id="tables">Tables</h2>
44        <table class="common-table">
45        <thead>
46            <tr>
47                <th>Table Head - th in thead</th>
48                <td>td in thead<td>
49            </tr>
50        </thead>
51        <tbody>
52            <tr>
53                <th>Tbody - th</th>
54                <td>Tbody - td</td>
55            </tr>
56            <tr>
57                <th>Tbody - th</th>
58                <td>Tbody - td</td>
59            </tr>
60            <tr>
61                <th>Tbody - th</th>
62                <td>Tbody - td</td>
63            </tr>
64        </tbody>
65        </table>
66    </div>
67
68    <div class="section">
69        <h2 id="comment-list"><?= $this->translate('Comment List') ?></h2>
70        <dl class="comment-list">
71            <dt>
72                John Doe
73                <span class="comment-time">
74                    <?= $this->translate('commented') ?>
75                    <span class="relative-time"><?= $this->translate('some time ago') ?></span>
76                </span>
77                <i class="remove-action icon-cancel"></i>
78            </dt>
79            <dd>
80                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
81                <br>
82                et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
83            </dd>
84            <dt>
85                Richard Roe
86                <span class="comment-time">
87                    <?= $this->translate('commented') ?>
88                    <span class="relative-time"><?= $this->translate('some time ago') ?></span>
89                </span>
90                <i class="remove-action icon-cancel"></i>
91            </dt>
92            <dd>
93                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
94                <br>
95                et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
96            </dd>
97        </dl>
98    </div>
99
100    <div class="section">
101        <h2 id="blockquote"><?= $this->translate('Blockquote') ?></h2>
102        <blockquote>
103            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
104            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
105            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
106            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
107            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
108            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
109            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
110        </blockquote>
111    </div>
112</div>
113