FontsFonts
| Type | Font Styles | Usage |
|---|---|---|
| Primary content | Arial, Helvetica, Verdana, sans-serif | generic content |
| Secondary content | Georgia, 'Times New Roman', Times, serif | button-links, toolbar headers, … |
| Headings | "Arial Black", Arial, Helvetica, Verdana, sans-serif | content headings |
| Title | Impact, "Arial Black", Arial, sans-serif | site title, panel titles, sidebar headings, external content headings, … |
| Code | Monaco, Courier, "Lucida console", "Consolas", monospace | Code samples |
| Icons | epfl-symbols | Icons to illustrate an action |
HeadingsHeadings
<a name="level-1-heading"></a><h1>Level 1 Heading</h1>
<a name="level-2-heading"></a><h2>Level 2 Heading</h2>
<a name="level-3-heading"></a><h3>Level 3 Heading</h3>
<a name="level-4-heading"></a><h4>Level 4 Heading</h4>
<a name="level-5-heading"></a><h5>Level 5 Heading</h5>
<a name="level-6-heading"></a><h6>Level 6 Heading</h6>
Common contentCommon content
In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.
Odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.
<a name="in-pellentesque-faucibus-vestibulum-nulla-at-nulla-justo"></a><h3>In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo</h3>
<p>Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed <abbr title="Lorem ipsum dolor sit amet">auctor</abbr> neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in <i lang="la">nulla</i> enim. Phasellus molestie magna non est <u>bibendum</u> non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
<p>Odio. Proin quis tortor orci. <dfn>Etiam</dfn> at risus et justo <b>dignissim</b> congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. <em>Quisque eget odio ac lectus vestibulum faucibus eget in metus</em>. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>
Themed contentThemed content
In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.
Odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.
<div class="themed">
<a name="in-pellentesque-faucibus-vestibulum-nulla-at-nulla-justo"></a><h3>In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo</h3>
<p>Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed <abbr title="Lorem ipsum dolor sit amet">auctor</abbr> neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in <i lang="la">nulla</i> enim. Phasellus molestie magna non est <u>bibendum</u> non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
<p>Odio. Proin quis tortor orci. <dfn>Etiam</dfn> at risus et justo <b>dignissim</b> congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. <em>Quisque eget odio ac lectus vestibulum faucibus eget in metus</em>. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>
</div>
Code blocksCode blocks
A sample Java code block:
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World");
}
}
<pre><code class="language-java">public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World");
}
}
</code></pre>