Source: Styles.scss, line 102
Source: _3-organisms/tile/_tile.generic.scss, line 1
8.1 Tile
Source: _3-organisms/tile/_tile.news.scss, line 1
8.1.1 News tiles
News tile loosely based on Bootstrap Cards (see build/node_modules/bootstrap/scss/_card.scss for details).
Example
<div class="module-tile module-tile--news">
<a class="tile tile-link "
href="#"
aria-labelledby="tile-01-headline">
<div class="tile-img">
<img class="tile-img-top img-zoom"
src="/styleguide/kss-assets/images/tile/tile-01.jpg"
alt="Headline goes here"/>
</div>
<div class="tile-body">
<span class="date text-muted">
<small>17.10.2017</small>
</span>
<h4 id="tile-01-headline" class="tile-title">
Headline goes here
</h4>
<div class="tile-text">
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
there live the blind texts.
</p>
</div>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.highlight.scss, line 1
8.1.2 Highlights tiles
Example
<div class="module-tile">
<a class="tile tile-link highlight "
href="#"
aria-labelledby="tile-02-headline">
<div class="tile-body">
<h4 id="tile-02-headline" class="tile-title">
Headline goes here
</h4>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="btntxt">get more information</span>
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.image.scss, line 1
8.1.3 Image tiles
Can be used in the following ratios if needed:
- 100 (1 tile - full width)
- 50:50
- 33:33:33
- 25:25:25:25
Example
<div class="module-tile module-img-tile">
<a class="tile tile-link "
href="#"
aria-labelledby="tile-01-headline">
<div class="tile-img">
<img class="tile-img-top img-zoom"
src="/styleguide/kss-assets/images/tile/tile-02.jpg"
alt=""/>
</div>
<div class="tile-body">
<h4 id="tile-01-headline" class="tile-title">
Headline goes here
</h4>
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.theme.scss, line 1
8.1.4 Theme tiles
Example
<div class="module-tile module-tile--topics">
<a href="#" title="Forschung an der TU Dortmund" target="_blank" class="tile tile__topics" rel="noreferrer">
<div class="tile__text-container">
<span class="tile__category">Kategorie</span>
<span class="tile__title">
Headline goes here
<span class="icon" aria-hidden="true"></span>
</span>
</div>
<img src="/styleguide/kss-assets/images/tile/theme-01.jpg" alt="" loading="lazy" width="418" height="418">
</a>
</div>
Source: _3-organisms/tile/_tile.stats.scss, line 1
8.1.5 Stats tiles
Example
<div class="module-tile">
<a class="tile tile-link highlight highlight-number " href="#">
<div class="tile-body">
<span class="highlighted-number">34.235</span> Studierende
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.deviant.scss, line 1
8.1.6 Deviant text tile
Example
<div class="module-tile">
<a class="tile tile-link deviant " href="#">
<div class="tile-body">
<h3>Headline goes here</h3>
<p class="tile-text">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
there live the blind texts.
</p>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.contact.scss, line 1
8.1.7 Contact tiles
The contact tile can also be used without image and/or without links to the detail page. The email address can be spam protected using HTML entities.
Example
Pressesprecher
Alexander von Humboldt
Tel.:
(+49)231 755-1
E-Mail:
pressetu-dortmundde
Büro AH1769, Raum 1859
Referat 1: Hochschulkommunikation
Weitere Kontaktmöglichkeiten
Web: www.test.de
Skype: Alexander_Von_Humboldt
Zeiten:
Mo-Mi: 8.00-12.00 Uhr
Do: 13.00-16.00 Uhr
<div class="module-tile">
<div class="tile tile-link contact-tile deviant " aria-labelledby="contact-tile-01">
<div class="tile-img">
<img class="tile-img-top" src="/styleguide/kss-assets/images/tile/contact-01.jpg" alt=""/>
</div>
<header id="contact-tile-01" class="beside-tile-img has-academic-title">
<div class="text-muted">Pressesprecher</div>
<h4 class="tile-title">Alexander von Humboldt</h4>
</header>
<div class="tile-body">
<div class="contact-info">
<p class="tile-text">
Tel.:
<a href="tel:+492317551">(+49)231 755-1</a>
<br>
E-Mail:
<a href="mailto:presse@tu-dortmund.de">
presse<span class="at"></span>tu-dortmund<span class="dot"></span>de
</a>
</p>
<p class="tile-text">
Büro AH1769, Raum 1859
<br>
Referat 1: Hochschul­kommunikation
</p>
</div>
<div class="additional-info tile-text">
<p>
Weitere Kontaktmöglichkeiten
<br>
Web: <strong><a href="#">www.test.de</a></strong>
<br>
Skype: <strong><a href="#">Alexander_Von_Humboldt</a></strong>
</p>
<p>
<strong>Zeiten:</strong>
<br>
Mo-Mi: 8.00-12.00 Uhr
<br>
Do: 13.00-16.00 Uhr
</p>
</div>
</div>
</div>
</div>
Source: _3-organisms/tile/_tile.testimonial.scss, line 1
8.1.8 Testimonial tiles
Example
<div class="module-tile">
<a class="tile tile-link testimonial-tile deviant " href="#">
<div class="tile-img">
<img class="tile-img-top" src="/styleguide/kss-assets/images/tile/testimonial-01.jpg" alt=""/>
</div>
<div class="beside-tile-img">
<div class="tile-text testimonial-credit">
Fanny Hensel
</div>
<div class="tile-text text-muted">
Master Medizintechnik
</div>
</div>
<div class="tile-body">
<div class="tile-text text-muted testimonial">
„Ich liebe den Austausch zwischen den Studierenden der verschiedenen Studiengänge und das
interdisziplinäre Studium an der TU!“
</div>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.event.scss, line 1
8.1.9 Event tiles
Example
<div class="module-tile">
<a class="tile tile-link event-tile deviant " href="#" aria-labelled-by="event-tile-1">
<div class="tile-img">
<img class="tile-img-top" src="/styleguide/kss-assets/images/tile/event-01.jpg" alt=""/>
</div>
<header class="beside-tile-img" id="event-tile-1">
<h3 class="tile-title">Herbst­ferien­betreuung 2017</h3>
</header>
<div class="tile-body">
<div class="tile-text text-muted">
Die Herbstferienbetreuung 2017 auf dem Campus Süd der TU Dortmund findet in der ersten Ferienwoche
statt.
</div>
</div>
<div class="tile-footer tile-footer-plain text-muted">
Beginn: 23.10.2017 | 08:00 Uhr<br />
Ende: 28.10.2017 | 16:00 Uhr
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.icons-w-text.scss, line 1
8.1.10 Icon w/ text tiles
Example
<div class="module-tile module-tile-icons">
<a href="#" class="tile tile-minimal tile-link">
<img src="/styleguide/kss-assets/images/tile/csm_icon-boy.png"
data-src="/styleguide/kss-assets/images/tile/csm_icon-boy.png"
data-srcset="/styleguide/kss-assets/images/tile/csm_icon-boy.png 130w,
/styleguide/kss-assets/images/tile/csm_icon-boy.png 260w,
/styleguide/kss-assets/images/tile/csm_icon-boy.png 390w"
data-sizes="(max-width: 450px) 100vw, 130px"
class="img-fluid img-zoom module-tile-icons__image"
alt=""
title=""
sizes="(max-width: 450px) 100vw, 130px"
srcset="/styleguide/kss-assets/images/tile/csm_icon-boy.png 130w,
/styleguide/kss-assets/images/tile/csm_icon-boy.png 260w,
/styleguide/kss-assets/images/tile/csm_icon-boy.png 390w">
<noscript>
<img src="/styleguide/kss-assets/images/tile/csm_icon-boy.png"
srcset="/styleguide/kss-assets/images/tile/csm_icon-boy.png 130w,
/styleguide/kss-assets/images/tile/csm_icon-boy.png 260w,
/styleguide/kss-assets/images/tile/csm_icon-boy.png 390w"
sizes="(max-width: 450px) 100vw, 130px"
class="img-fluid img-zoom module-tile-icons__image"
alt="" />
</noscript>
<div class="tile-body">
<p class="module-tile-icons__text">
Diese Veranstaltungen sind ausschließlich für Jungen konzipiert.
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</p>
</div>
</a>
<a href="#" class="tile tile-minimal tile-link">
<img src="/styleguide/kss-assets/images/tile/csm_icon-girl.png"
data-src="/styleguide/kss-assets/images/tile/csm_icon-girl.png"
data-srcset="/styleguide/kss-assets/images/tile/csm_icon-girl.png 130w,
/styleguide/kss-assets/images/tile/csm_icon-girl.png 260w,
/styleguide/kss-assets/images/tile/csm_icon-girl.png 390w"
data-sizes="(max-width: 450px) 100vw, 130px"
class="img-fluid img-zoom module-tile-icons__image"
alt=""
title=""
sizes="(max-width: 450px) 100vw, 130px"
srcset="/styleguide/kss-assets/images/tile/csm_icon-girl.png 130w,
/styleguide/kss-assets/images/tile/csm_icon-girl.png 260w,
/styleguide/kss-assets/images/tile/csm_icon-bgirly.png 390w">
<noscript>
<img src="/styleguide/kss-assets/images/tile/csm_icon-girl.png"
srcset="/styleguide/kss-assets/images/tile/csm_icon-girl.png 130w,
/styleguide/kss-assets/images/tile/csm_icon-girl.png 260w,
/styleguide/kss-assets/images/tile/csm_icon-girl.png 390w"
sizes="(max-width: 450px) 100vw, 130px"
class="img-fluid img-zoom module-tile-icons__image"
alt="" />
</noscript>
<div class="tile-body">
<p class="module-tile-icons__text">
Diese Veranstaltungen sind ausschließlich für Mädchen konzipiert.
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</p>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.project.scss, line 1
8.1.11 Project tiles
Example
Der Titel eines Projekts
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Ein etwas längerer Titel eines Projekts, der nun umbrechen sollte
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
<div class="module-tile">
<a href="#" class="tile project-tile tile--thirds tile-link">
<div class="tile-img">
<img class="img-fluid"
src="/styleguide/kss-assets/images/tile/tile-01.jpg"
alt="" />
</div>
<div class="tile-body">
<h4>Der Titel eines Projekts</h4>
<div class="icon-calendar text-muted">
<span class="icon" aria-hidden="true"></span>
</div>
<span class="date text-muted">
01.01.2022 - 30.09.2022
</span>
<div class="tile-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</div>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
<a href="#" class="tile project-tile tile--thirds tile-link">
<div class="tile-body">
<h4>Ein etwas längerer Titel eines Projekts, der nun umbrechen sollte</h4>
<div class="icon-calendar text-muted">
<span class="icon" aria-hidden="true"></span>
</div>
<span class="date text-muted">
01.01.2022 - 30.09.2022
</span>
<div class="tile-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</div>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>Source: _3-organisms/tile/_tile.address.scss, line 1
8.1.12 Address tiles
Example
<div class="module-tile module-tile--address">
<a class="tile tile-link "
href="#"
aria-labelledby="tile-01-headline">
<div class="tile-img">
<img class="tile-img-top img-zoom"
src="/styleguide/kss-assets/images/tile/tile-01.jpg"
alt="Headline goes here"/>
</div>
<div class="tile-body">
<h4 id="tile-01-headline" class="h5 tile-title">
John Doe
</h4>
<div class="tile-text">
<p>
Tester<br>
mehrwert intermediale kommunikation GmbH<br>
Teststraße 42<br>
12345 Testhausen<br>
Raum 12<br>
</p>
<p>
Tel: 49 1234 567890<br>
E-Mail: john.doe@example.com
</p>
</div>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.infobox.scss, line 1
8.2 Tile Infobox
Source: _3-organisms/tile/_tile.infobox.scss, line 5
8.2.1 Infobox full width
Example
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. 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.
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.
<div class="module-tile module-tile--infobox">
<div class="tile tile--full deviant">
<div class="tile-body">
<div class="module-text">
<p>
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. 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.<br> 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>
</div>
</div>
Source: _3-organisms/tile/_tile.infobox.scss, line 36
8.2.2 Infobox 50/50
Example
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. 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.
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
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.
<div class="module-tile module-tile--infobox">
<div class="tile deviant">
<div class="tile-body">
<div class="module-text">
<p>
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. 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.<br> 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>
</div>
<a href="#" class="tile tile-link highlight highlight-inverted">
<div class="tile-body">
<h3>Lorem ipsum dolor sit amet</h3>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="btntxt">Lorem ipsum</span>
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>
Source: _3-organisms/tile/_tile.infobox.scss, line 42
8.2.3 Infobox 66/33
Example
At vero eos et accusam
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet
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.
<div class="module-tile module-tile--infobox">
<div class="tile tile--three-thirds deviant">
<div class="tile-body">
<div class="module-text">
<h3>At vero eos et accusam</h3>
<p>
Stet clita kasd gubergren, no sea takimata
<a href="#">sanctus</a> est Lorem
ipsum dolor sit amet.
</p>
</div>
</div>
</div>
<a href="#" class="tile tile-link tile--thirds highlight highlight-inverted">
<div class="tile-body">
<h3>Lorem ipsum dolor sit amet</h3>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="tile-footer tile-footer-plain">
<span class="link-dummy">
<span class="btntxt">Lorem ipsum</span>
<span class="icon" aria-hidden="true"></span>
</span>
</div>
</a>
</div>