<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>
&lt;html&gt;
  &lt;body&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</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>
&lt;html&gt;
  &lt;body&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</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"
}

Base styles

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.

Underlines / text decoration

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).

Theme

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>