mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-10-31 03:14:31 +01:00
113 lines
4.4 KiB
PHTML
113 lines
4.4 KiB
PHTML
<div class="controls">
|
|
<?= $this->tabs ?>
|
|
</div>
|
|
|
|
<div class="content styleguide">
|
|
<div class="section">
|
|
<h1>Icinga Web 2 Design Guidelines</h1>
|
|
|
|
<ul class="toc">
|
|
<li><a href="#headings">Headings</a></li>
|
|
<li><a href="#block-content">Block Content</a></li>
|
|
<li><a href="#tables">Tables</a></li>
|
|
<li><a href="#comment-list">Comment List</a></li>
|
|
<li><a href="#blockquote">Blockquote</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 id="headings">Headings</h2>
|
|
<h1>Header h1</h1>
|
|
<h2>Header h2</h2>
|
|
<h3>Header h3</h3>
|
|
<h4>Header h4</h4>
|
|
<h5>Header h5</h5>
|
|
<h6>Header h6</h6>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 id="block-content">Block Content</h2>
|
|
<h3>Paragraph</h3>
|
|
<p>
|
|
This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
A <a href="#">link inside a paragraph</a>.
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 id="tables">Tables</h2>
|
|
<table class="common-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Table Head - th in thead</th>
|
|
<td>td in thead<td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Tbody - th</th>
|
|
<td>Tbody - td</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Tbody - th</th>
|
|
<td>Tbody - td</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Tbody - th</th>
|
|
<td>Tbody - td</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 id="comment-list"><?= $this->translate('Comment List') ?></h2>
|
|
<dl class="comment-list">
|
|
<dt>
|
|
John Doe
|
|
<span class="comment-time">
|
|
<?= $this->translate('commented') ?>
|
|
<span class="relative-time"><?= $this->translate('some time ago') ?></span>
|
|
</span>
|
|
<i class="remove-action icon-cancel"></i>
|
|
</dt>
|
|
<dd>
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
|
|
<br>
|
|
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</dd>
|
|
<dt>
|
|
Richard Roe
|
|
<span class="comment-time">
|
|
<?= $this->translate('commented') ?>
|
|
<span class="relative-time"><?= $this->translate('some time ago') ?></span>
|
|
</span>
|
|
<i class="remove-action icon-cancel"></i>
|
|
</dt>
|
|
<dd>
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
|
|
<br>
|
|
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 id="blockquote"><?= $this->translate('Blockquote') ?></h2>
|
|
<blockquote>
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
|
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
|
|
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
</blockquote>
|
|
</div>
|
|
</div>
|