<div class="module-tile module-tile--news">
    <a
        class="tile tile-link has-image {{modifier_class}}"
        href="#"
        aria-labelledby="tile-01-headline"
    >
        <div class="tile-body order-2">
            <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">
                <div itemprop="description">
                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
                    there live the blind texts.
                </div>
            </div>
        </div>
        <div class="tile-footer tile-footer-plain order-3">
            <span class="link-dummy">
                <span class="icon" aria-hidden="true"></span>
            </span>
        </div>
        <div class="tile-img order-1">
            <img class="tile-img-top img-zoom"
                 src="/styleguide/kss-assets/images/tile/tile-01.jpg"
                 alt="Headline goes here"
            />
        </div>
    </a>
</div>

<div class="module-tile module-tile--news">
    <a
        class="tile tile-link highlight {{modifier_class}}"
        href="#"
        aria-labelledby="tile-02-headline"
    >
        <div class="tile-body order-2">
            <h4 id="tile-02-headline" class="tile-title">
                Headline goes here
            </h4>
            <div class="tile-text">
                <div itemprop="description">
                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
                    there live the blind texts.
                </div>
            </div>
        </div>
        <div class="tile-footer tile-footer-plain order-3">
           <span class="link-dummy">
             <span class="btntxt">get more information</span>
             <span class="icon" aria-hidden="true"></span>
           </span>
        </div>
    </a>
</div>

<div class="module-tile module-img-tile">
    <a
        class="tile tile-link {{modifier_class}}"
        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=""
            />
            <span class="copyright-element" style="width:44.916820702403%">
                <span class="copyright">© Hans Tester / TU Dortmund</span>
            </span>
        </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>

<div class="module-tile module-tile--topics">
    <a
        href="#"
        title="Forschung an der TU Dortmund"
        target="_blank"
        class="tile tile__topics {{modifier_class}}"
        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>
        <div class="tile-img">
            <img
                src="/styleguide/kss-assets/images/tile/theme-01.jpg"
                alt=""
                loading="lazy"
                width="418"
                height="418"
            />
            <span class="copyright-element" style="width:90%">
                <span class="copyright">© Hans Tester / TU Dortmund</span>
            </span>
        </div>
    </a>
</div>

<div class="module-tile">
    <a
        class="tile tile-link highlight highlight-number {{modifier_class}}"
        href="#"
    >
        <div class="tile-body">
            <span class="highlighted-number">34.235</span> Studierende
        </div>
    </a>
</div>

<div class="module-tile">
    <a
        class="tile tile-link deviant {{modifier_class}}"
        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>

<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="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#112;&#114;&#101;&#115;&#115;&#101;&#64;&#116;&#117;&#45;&#100;&#111;&#114;&#116;&#109;&#117;&#110;&#100;&#46;&#100;&#101;">
                        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&shy;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>

<div class="module-tile">
    <a
        class="tile tile-link testimonial-tile deviant {{modifier_class}}"
        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">
            <blockquote class="blockquote text-muted mb-0">
                „Ich liebe den Austausch zwischen den Studierenden der verschiedenen Studiengänge und das
                interdisziplinäre Studium an der TU!“
            </blockquote>
        </div>
        <div class="tile-footer tile-footer-plain">
            <span class="link-dummy">
                <span class="icon" aria-hidden="true"></span>
            </span>
        </div>
    </a>
</div>

<div class="module-tile">
    <a
        class="tile tile-link event-tile deviant {{modifier_class}}"
        href="#"
        title="Herbstferienbetreuung 2017"
    >
        <header class="order-2 beside-tile-img">
            <h3 class="tile-title">Herbst&shy;ferien&shy;betreuung 2017</h3>
        </header>
        <div class="tile-body order-3">
            <div class="tile-text text-muted">
                <div itemprop="description">
                    Die Herbstferienbetreuung 2017 auf dem Campus Süd der TU Dortmund findet in der ersten Ferienwoche
                    statt.
                </div>
            </div>
        </div>
        <div class="tile-footer tile-footer-plain text-muted order-4">
            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>
        <div class="tile-img order-1">
            <img class="tile-img-top" src="/styleguide/kss-assets/images/tile/event-01.jpg" alt=""/>
        </div>
    </a>
</div>

<div class="module-tile module-tile-icons">
    <a
        href="#"
        class="tile tile-minimal tile-link {{modifier_class}}"
    >
        <img
            src="/styleguide/kss-assets/images/tile/csm_icon-boy.png"
            class="img-zoom module-tile-icons__image"
            alt=""
        />
        <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>
</div>

<div class="module-tile">
    <a
        href="#"
        class="tile project-tile tile-link {{modifier_class}}"
    >
        <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-link {{modifier_class}}"
    >
        <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>

<div class="address-list">
    <div class="module-tile module-tile--address module-tile--address-paginated">
        <div class="tile {{modifier_class}}">
            <div class="tile-body order-2">
                <h4 class="h5 tile-title">
                    John Doe
                </h4>
                <div class="tile-text">
                    <p>
                        Tester
                    </p>
                    <p>
                        Tel: +49 1234 / 567890<br>
                        <a class="tile-anchor tile__anchor" href="mailto:mail@example.com">
                            E-Mail senden
                        </a>
                    </p>
                </div>
            </div>
            <div class="tile-footer tile-footer-plain order-3">
                <a
                    href="#"
                    class="tile-anchor tile__anchor tile__anchor--right"
                    title="John Doe"
                >
                <span class="tile-anchor__text">
                    Mehr Informationen
                </span>
                    <span class="tile-anchor__icon icon" aria-hidden="true"></span>
                </a>
            </div>
            <div class="tile-img order-1">
                <figure>
                    <div class="image-element">
                        <picture>
                            <img
                                class="tile-img-top img-zoom"
                                src="/styleguide/kss-assets/images/tile/avatar.jpg"
                                alt=""
                                width="320"
                                height="240"
                            />
                        </picture>
                        <span class="copyright-element" style="width:67.5%">
                        <span class="copyright">© Hans Tester / TU Dortmund</span>
                    </span>
                    </div>
                </figure>
            </div>
        </div>
        <div class="tile {{modifier_class}}">
            <div class="tile-body order-2">
                <h4 class="h5 tile-title">
                    Jane Doe
                </h4>
                <div class="tile-text">
                    <p>
                        Tester
                    </p>
                    <p>
                        Tel: +49 1234 / 567890<br>
                        <a class="tile-anchor tile__anchor" href="mailto:mail@example.com">
                            E-Mail senden
                        </a>
                    </p>
                </div>
            </div>
            <div class="tile-footer tile-footer-plain order-3">
                <a
                    href="#"
                    class="tile-anchor tile__anchor tile__anchor--right"
                    title="Jane Doe"
                >
                <span class="tile-anchor__text">
                    Mehr Informationen
                </span>
                    <span class="tile-anchor__icon icon" aria-hidden="true"></span>
                </a>
            </div>
            <div class="tile-img order-1">
                <figure>
                    <div class="image-element">
                        <picture>
                            <img
                                class="tile-img-top img-zoom"
                                src="/styleguide/kss-assets/images/tile/avatar.jpg"
                                width="320"
                                height="240"
                                alt=""
                            />
                        </picture>
                        <span class="copyright-element" style="width:67.5%">
                        <span class="copyright">© Hans Tester / TU Dortmund</span>
                    </span>
                    </div>
                </figure>
            </div>
        </div>
    </div>
</div>

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

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

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