<h1>Lorem ipsum h1</h1>
<h2>Lorem ipsum h2</h2>
<h3>Lorem ipsum h3</h3>
<h4>Lorem ipsum h4</h4>
<h5>Lorem ipsum h5</h5>
<h6>Lorem ipsum h6</h6>
<h1>
<a href="">Lorem ipsum h1 with link inside</a>
</h1>
<h2>
<a href="">Lorem ipsum h2 with link inside</a>
</h2>
<h3>
<a href="">Lorem ipsum h3 with link inside</a>
</h3>
<h4>
<a href="">Lorem ipsum h4 with link inside</a>
</h4>
<h5>
<a href="">Lorem ipsum h5 with link inside</a>
</h5>
<h6>
<a href="">Lorem ipsum h6 with link inside</a>
</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.</p>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</li>
<li>Lorem ipsum</li>
</ul>
<dl>
<dt>Lorem ipsum</dt>
<dd>Lorem ipsum dolor sit amet</dd>
<dt>Lorem ipsum</dt>
<dd>Lorem ipsum dolor sit amet</dd>
</dl>
<table>
<thead>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
</table>
<blockquote>
Lorem ipsum dolor sit amet
</blockquote>
<pre>
<html>
<body>
<p>...</p>
</body>
</html>
</pre>
<address>
Free University of Bozen-Bolzano<br>
Universitätsplatz 1 - piazza Università, 1<br>
Italy - 39100, Bozen-Bolzano<br>
</address>
<hr>
<p>
Inline elements:
<a>Link</a>
<abbr title="Abbreviation">ABBR</abbr>
<strong>Strong</strong>
<b>Bold</b>
<em>Emphasis</em>
<i>Italic</i>
<code>Code</code>
<kbd>Keyboard input</kbd>
<samp>Sample output</samp>
<q>Quote</q>
<cite>Title</cite>
<mark>Mark</mark>
</p>
<h1>{{ label }} h1</h1>
<h2>{{ label }} h2</h2>
<h3>{{ label }} h3</h3>
<h4>{{ label }} h4</h4>
<h5>{{ label }} h5</h5>
<h6>{{ label }} h6</h6>
<h1>
<a href="">{{ label }} h1 with link inside</a>
</h1>
<h2>
<a href="">{{ label }} h2 with link inside</a>
</h2>
<h3>
<a href="">{{ label }} h3 with link inside</a>
</h3>
<h4>
<a href="">{{ label }} h4 with link inside</a>
</h4>
<h5>
<a href="">{{ label }} h5 with link inside</a>
</h5>
<h6>
<a href="">{{ label }} h6 with link inside</a>
</h6>
<p>{{text}}</p>
<ul>
<li>{{ label }}</li>
<li>{{ label }}</li>
<li>{{ label }}
<ul>
<li>{{ label }}</li>
<li>{{ label }}</li>
<li>{{ label }}</li>
</ul>
</li>
<li>{{ label }}</li>
</ul>
<dl>
<dt>{{ label }}</dt>
<dd>{{ labelLong }}</dd>
<dt>{{ label }}</dt>
<dd>{{ labelLong }}</dd>
</dl>
<table>
<thead>
<tr>
<th>{{ label }}</th>
<th>{{ label }}</th>
<th>{{ label }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ label }}</td>
<td>{{ label }}</td>
<td>{{ label }}</td>
</tr>
<tr>
<td>{{ label }}</td>
<td>{{ label }}</td>
<td>{{ label }}</td>
</tr>
</tbody>
</table>
<blockquote>
{{ labelLong }}
</blockquote>
<pre>
<html>
<body>
<p>...</p>
</body>
</html>
</pre>
<address>
Free University of Bozen-Bolzano<br>
Universitätsplatz 1 - piazza Università, 1<br>
Italy - 39100, Bozen-Bolzano<br>
</address>
<hr>
<p>
Inline elements:
<a>Link</a>
<abbr title="Abbreviation">ABBR</abbr>
<strong>Strong</strong>
<b>Bold</b>
<em>Emphasis</em>
<i>Italic</i>
<code>Code</code>
<kbd>Keyboard input</kbd>
<samp>Sample output</samp>
<q>Quote</q>
<cite>Title</cite>
<mark>Mark</mark>
</p>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.",
"linkTarget": "_self",
"url": "https://www.unibz.it"
}
There are some base styles applied to raw elements.
One notorious absence are links. The reasoning behind this is that they have to be overwritten constantly to create different button / link styles, so to save some css <a>
tags are not styled by default.
Links use a underline style of border-bottom: 1px solid
instead of text-decoration: underline
this means that links should not be made display: block
if they are underlined. If you need underlines inside a block element use a inline element inside:
<a href="" class="make-this-display-block">
<span class="make-this-underline-and-keep-inline">
</a>
There are some utility classes to achieve this. Have a look at Utilitites/Text
.
Links inside headings are styled by default to use border-bottom: 1px solid
(read above).
The corporate color of the unibz is blue, but to guide users through the faculties some themes are available. To apply a theme use one of these classes on the <body>
, <html>
or other wrapper tag:
.t-edu
.t-lll
.t-dsgn
.t-econ
.t-comp
.t-scitec
.t-library
<!DOCTYPE html>
<html lang="en">
<head><!-- ... --></head>
<body class="t-edu">
Everything that was corporate blue will now be in `edu` color.
</body>
</html>