06 Odkazy
Zdrojové CSS: /src/css/_typography.scss a /src/css/atoms/_links.scss
<h1><a href="#">Nadpis 1 s odkazem</a></h1>
<h2><a href="#">Nadpis 2 s odkazem</a></h2>
<h3><a href="#">Nadpis 3 s odkazem</a></h3>
<h4><a href="#">Nadpis 4 s odkazem</a></h4>
<h5><a href="#">Nadpis 5 s odkazem</a></h5>
<h6><a href="#">Nadpis 6 s odkazem</a></h6><p>
<strong>Standardní odkaz:</strong> <a href="#">Odkaz</a>
</p>
<p>
<strong>Odkaz bez atributu href:</strong> <a>Odkaz</a>
</p>Pro odkazy s ikonkami slouží atom link-icon, kterému se přidává modifikátor link-icon--before / link-icon--after podle potřeby a ikonka dle atomu ikonek.
Pro externí odkazy (začínající http(s)://) se automaticky doplňuje ikonka externího odkazu. Tuto funkcionalitu je možné deaktivovat aplikací .no-ext na element html.
<p>
<a href="#" class="link-icon link-icon--before">
<span class="icon icon-calendar-alt"></span>Ikonka před odkazem
</a>
</p>
<p>
<a href="#" class="link-icon link-icon--after">
Externí odkaz<span class="icon icon-external-link"></span>
</a>
</p>
<p>
<a href="#" class="link-icon link-icon--after">
Napište nám!<span class="icon icon-envelope"></span>
</a>
</p>Pro standardní odkazy s ikonkou slouží stejná konstrukce jako u Odkazů s ikonkami.
Pro odkazy s informací o souboru slouží atom link-file s konstrukcí dle ukázky kódu.
<p>
<a href="#" class="link-icon link-icon--after link-icon--after-small">
Video soubor<span class="icon icon-file-video"></span>
</a>
</p>
<p>
<a href="#" class="link-icon link-icon--after link-icon--after-small">
Audio soubor<span class="icon icon-file-audio"></span>
</a>
</p>
<p>
<a href="#" class="link-file">
<span class="link-file__name">
Word dokument
</span>
<span class="file-type">
<strong>.doc</strong> 589kB
</span>
</a>
</p>
<p>
<a href="#" class="link-file">
<span class="link-file__name">
Excel dokument
</span>
<span class="file-type">
<strong>.xls</strong> 589kB
</span>
</a>
</p>
<p>
<a href="#" class="link-file">
<span class="link-file__name">
Powerpoint Dokument
</span>
<span class="file-type">
<strong>.ppt</strong> 589kB
</span>
</a>
</p>
<p>
<a href="#" class="link-file">
<span class="link-file__name">
PDF Dokument
</span>
<span class="file-type">
<strong>.pdf</strong> 589kB
</span>
</a>
</p>Pro standardní odkazy s ikonkou slouží stejná konstrukce jako u Odkazů s ikonkami.
Pro odkazy s informací o souboru slouží atom link-file s konstrukcí dle ukázky kódu.
Pro situace, kdy je obsluha odkazu řízena z javascriptu a není žádoucí, aby byl použit stnadardní element a.
<p>
<strong>Element span ve stylu odkazu:</strong> <span class="link">Odkaz
</span></p>
<p>
<span class="link link-icon link-icon--before">
<span class="icon icon-calendar-alt"></span>S ikonkou
</span>
</p>
<p>
<span class="link link-file">
<span class="link-file__name">
Word dokument
</span>
<span class="file-type">
<strong>.doc</strong> 589kB
</span>
</span>
</p>Pro situace, kdy je obsluha odkazu řízena z javascriptu a není žádoucí, aby byl použit stnadardní element a.
Element span ve stylu odkazu: Odkaz
Word dokument .doc 589kB
Tabulka se soubory je kombinací standardní tabulky z typografie a atomu Multimediální odkazy viz. výše.
<table class="table-padded table-big">
<tbody>
<tr class="tr-clickable">
<th class="no-a-underline">
<a href="#">Word dokument</a>
</th>
<td class="right">
<span class="file-type">
<strong>.doc</strong> 589kB
</span>
</td>
</tr>
<tr class="tr-clickable">
<th class="no-a-underline">
<a href="#">Excel dokument</a>
</th>
<td class="right">
<span class="file-type">
<strong>.xls</strong> 589kB
</span>
</td>
</tr>
<tr class="tr-clickable">
<th class="no-a-underline">
<a href="#">Powerpoint Dokument</a>
</th>
<td class="right">
<span class="file-type">
<strong>.ppt</strong> 589kB
</span>
</td>
</tr>
<tr class="tr-clickable">
<th class="no-a-underline">
<a href="#">PDF Dokument</a>
</th>
<td class="right">
<span class="file-type">
<strong>.pdf</strong> 589kB
</span>
</td>
</tr>
</tbody>
</table>Tabulka se soubory je kombinací standardní tabulky z typografie a atomu Multimediální odkazy viz. výše.
| Word dokument | .doc 589kB |
|---|---|
| Excel dokument | .xls 589kB |
| Powerpoint Dokument | .ppt 589kB |
| PDF Dokument | .pdf 589kB |
<p class="medium">
Etiam at urna sollicitudin,
<a href="#" class="link-icon link-icon--after">
sketcher.sk<span class="icon icon-external-link"></span>
</a>
libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. <a href="#">Sed euismod velit ac mauris</a> pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa. Nunc eget dui
<a href="#" class="link-icon link-icon--after">
kontaktujte nás<span class="icon icon-envelope"></span>
</a>
</p>
<p class="medium">
Eeuismod velit ac mauris pretium
<a href="#" class="link-file">
<span class="link-file__name">
Zoznam prijatých nástupcov
</span>
<span class="file-type">
<strong>.xls</strong> 589kB
</span>
</a>
mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio s
</p>Etiam at urna sollicitudin, sketcher.sk libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa. Nunc eget dui kontaktujte nás
Eeuismod velit ac mauris pretium Zoznam prijatých nástupcov .xls 589kB mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio s
<p>
Navštívené odkazy ($linkVisited) mají barvu: #00004b.
</p>
<p>
Barvu lze jednoduše předefinovat v lib/variables.scss.
</p>Navštívené odkazy ($linkVisited) mají barvu: #00004b.
Barvu lze jednoduše předefinovat v lib/variables.scss.
Pro použití v seznamu odkazů, kde podtržení nevypadá dobře a je jasné, že se jedná o odkazy. Na obalující element je potřeba přidat třídu .no-a-underline.
<div class="no-a-underline">
<a href="/pro-studenty/c-vynikajici-diplomove-prace" title="Program rektora – kategorie C" data-udi="umb://document/c2e4f6e578e942929faf8bb584df1e64">
<span class="">C – Podpora vynikajících diplomových prací</span>
</a>
<br>
<a href="/pro-studenty/d-studentske-casopisy" title="Program rektora – kategorie D" data-udi="umb://document/ff0ba1f128304066b633e16b3afde330">
<span class="">D – Podpora studentských časopisů</span>
</a>
</div>Pro použití v seznamu odkazů, kde podtržení nevypadá dobře a je jasné, že se jedná o odkazy. Na obalující element je potřeba přidat třídu .no-a-underline.
<div class="box-bg box-bg--primary white">
<h1><a href="#">Nadpis 1 s odkazem</a></h1>
<h2><a href="#">Nadpis 2 s odkazem</a></h2>
<h3><a href="#">Nadpis 3 s odkazem</a></h3>
<h4><a href="#">Nadpis 4 s odkazem</a></h4>
<h5><a href="#">Nadpis 5 s odkazem</a></h5>
<h6><a href="#">Nadpis 6 s odkazem</a></h6>
<p>
<a href="#" class="link-icon link-icon--before">
<span class="icon icon-calendar-alt"></span>Ikonka před odkazem
</a>
</p>
<p>
<a href="#" class="link-icon link-icon--after">
Externí odkaz<span class="icon icon-external-link"></span>
</a>
</p>
<p>
<a href="#" class="link-icon link-icon--after">
Napište nám!<span class="icon icon-envelope"></span>
</a>
</p>
<p class="no-a-underline">
<a href="/pro-studenty/c-vynikajici-diplomove-prace" title="Program rektora – kategorie C" data-udi="umb://document/c2e4f6e578e942929faf8bb584df1e64">
<span class="">C – Podpora vynikajících diplomových prací</span>
</a>
</p>
</div>
Pro odkazy s ikonkami slouží atom link-icon, kterému se přidává modifikátor link-icon--before / link-icon--after podle potřeby a ikonka dle atomu ikonek.
Pro externí odkazy (začínající http(s)://) se automaticky doplňuje ikonka externího odkazu. Tuto funkcionalitu je možné deaktivovat aplikací .no-ext na element html.