TU Dortmund - Living Styleguide
TU Dortmund - Living Styleguide

Example

Kicker

Headline goes here

<div class="module-text">
    <span class="kicker">Kicker</span>
    <h1>Headline goes here</h1>
</div>

Source: _3-organisms/modules/_module.intro.scss, line 1

7.1.2 Intro

Example

Headline goes here

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. 

<header>
    <h1>Headline goes here</h1>
</header>
<div class="module-text intro">
    <p>
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
        there live the blind texts.
    </p>
</div>

Example

Headline goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 

<header>
    <h2>
        Headline goes here
    </h2>
</header>
<div class="module-text">
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. 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,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. 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>

Example

Headline goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

<header>
    <h2>
        Headline goes here
    </h2>
</header>
<div class="module-text two-columns">
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. 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,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. 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>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
    </p>
</div>

Source: _3-organisms/_modules.scss, line 67

7.1.5 Text w/ Image

This module may optionally be used with image left instead.

Example

Headline goes here

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

© This is a very long copyright message
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia. 
<header>
    <h2>Headline goes here</h2>
</header>
<div class="module">
    <div class="module-text">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <p>
                        Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language
                        ocean. A small river named Duden flows by their place and supplies it with the necessary
                        regelialia.
                    </p>
                </div>
                <div class="col-md-6">
                    <figure>
                        <div class="image-element">
                            <img class="img-fluid"
                                 src="/styleguide/kss-assets/images/content/content-01.jpg"
                                 alt=""/>
                            <span class="copyright-element">
                                <span class="copyright">
                                    &copy; This is a very long copyright message
                                </span>
                            </span>
                        </div>
                        <figcaption>
                            Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</div>

Source: _3-organisms/_modules.scss, line 75

7.1.6 Image w/ 2 columns

The image modules are available in additional variants (mainly differing in the used col-* classes):

  • 100%
  • 50% | 50% (as seen below)
  • 33% | 33% | 33%
  • 25% | 25% | 25% | 25%

Example

© Jürgen Huhn
© Jürgen Huhn 
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <figure>
                <div class="image-element">
                    <img src="/styleguide/kss-assets/images/content/image-50-50.jpg"
                         class="img-fluid"
                         alt=""
                         title="">

                    <span class="copyright-element">
                        <span class="copyright">
                            © Jürgen Huhn
                        </span>
                    </span>
                </div>
            </figure>
        </div>

        <div class="col-sm-6">
            <figure>
                <div class="image-element">
                    <img src="/styleguide/kss-assets/images/content/image-50-50.jpg"
                         class="img-fluid"
                         alt=""
                         title="">

                    <span class="copyright-element">
                        <span class="copyright">
                            © Jürgen Huhn
                        </span>
                    </span>
                </div>
            </figure>
        </div>
    </div>
</div>

Example

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove 

<div class="accordion " id="accordion-4711">
    <div class="accordion-item">
        <div class="accordion-header">
            <h5>
                <a data-toggle="collapse" data-parent="#accordion-4711" href="#collapse-4711-1" aria-controls="collapse-4711-1" aria-expanded="false" class="collapsed">
                    Far far away, behind the word mountains
                    <span class="icon" aria-hidden="true"></span>
                </a>
            </h5>
        </div>
        <div id="collapse-4711-1" class="collapse">
            <div class="accordion-body">
                <p>
                    When she reached the first hills of the Italic Mountains, she had a last view back on the skyline
                    of her hometown Bookmarksgrove
                </p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <h5>
                <a data-toggle="collapse" data-parent="#accordion-4711" href="#collapse-4711-2" aria-controls="collapse-4711-2" aria-expanded="false" class="collapsed">
                    Far from the countries Vokalia and Consonantia, there live the blind texts
                    <span class="icon" aria-hidden="true"></span>
                </a>
            </h5>
        </div>
        <div id="collapse-4711-2" class="collapse">
            <div class="accordion-body">
                <p>
                    When she reached the first hills of the Italic Mountains, she had a last view back on the skyline
                    of her hometown Bookmarksgrove
                </p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <h5>
                <a data-toggle="collapse" data-parent="#accordion-4711" href="#collapse-4711-3" aria-controls="collapse-4711-3" aria-expanded="false" class="collapsed">
                    Separated they live in Bookmarksgrove
                    <span class="icon" aria-hidden="true"></span>
                </a>
            </h5>
        </div>
        <div id="collapse-4711-3" class="collapse">
            <div class="accordion-body">
                <p>
                    When she reached the first hills of the Italic Mountains, she had a last view back on the skyline
                    of her hometown Bookmarksgrove
                </p>
            </div>
        </div>
    </div>
</div>

Source: _3-organisms/modules/_modules.tabs.scss, line 1

7.1.8 Tabs

Example

<div class="module-tabs">
    <nav>
        <div class="tab-controls d-lg-none">
            <a class="btn icon-btn no-txt icon-angle-left previous" role="button">
                <span class="btntxt sr-only">vorheriger Tab</span>
                <span class="icon" aria-hidden="true"></span>
            </a>
            <a class="btn icon-btn no-txt icon-angle-right next" role="button">
                <span class="icon" aria-hidden="true"></span>
                <span class="btntxt sr-only">nächster Tab</span>
            </a>
        </div>

        <ul class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active"
                   id="nav-1-tab"
                   data-toggle="tab"
                   href="#nav-1"
                   role="tab"
                   aria-controls="nav-1"
                   aria-selected="false">
                    Wir sind die TU Dortmund
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link"
                   id="nav-2-tab"
                   data-toggle="tab"
                   href="#nav-2"
                   role="tab"
                   aria-controls="nav-2"
                   aria-selected="false">
                    Die TU im Detail
                </a>
            </li>
        </ul>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active"
             id="nav-1"
             role="tabpanel"
             aria-labelledby="nav-1-tab">
            <div class="module-text">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <p>
                                Die TU Dortmund zählt mit rund 6.200 Beschäftigten zu Dortmunds größten
                                Arbeitgebern und hat den Wandel der Stadt und des Ruhrgebiets von Europas
                                größter Kohle- und Stahlindustrie zum HighTech- und Dienstleistungsstandort
                                sowie zur Kulturmetropole mit vorangetrieben.
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p>
                                Der rege Austausch mit Nachbarn in der Region, aber auch mit Partnern
                                in Europa und der ganzen Welt ist eine besondere Bereicherung für Studierende
                                und Wissenschaftler. Jeder zehnte Studierende der TU Dortmund kommt aus dem
                                Ausland. Außerdem heißt die Universität jährlich rund 190 Austauschstudierende
                                willkommen.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade"
             id="nav-2"
             role="tabpanel"
             aria-labelledby="nav-2-tab">
            <div class="module-text">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <p>
                                Die Technische Universität Dortmund hat seit ihrer Gründung vor 49 Jahren ein besonderes
                                Profil gewonnen,
                                mit 16 Fakultäten in Natur- und Ingenieurwissenschaften, Gesellschafts- und
                                Kulturwissenschaften.
                                Das Lehrangebot umfasst rund 80 Studiengänge, darunter klassische ebenso wie innovative
                                Fächer,
                                einige einzigartige Angebote und eine breit aufgestellte Lehrerbildung für alle
                                Schulformen.
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p>
                                Die verschiedenen Wissenschaftsdisziplinen eint ein universitärer Geist, in dem
                                Interdisziplinarität und Interaktion,
                                Kommunikation und Kooperation gelebt werden. Dadurch sind technologische Innovation,
                                Methoden- und Erkenntnisfortschritt
                                an der TU Dortmund geradezu programmiert.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Source: _3-organisms/modules/_module.flexslider.scss, line 13

7.1.9 Slider

This slider may be used for pure image sliders, galleries or content sliders accordingly. Requires Flexslider.

<section class="module">
    <div class="flexslider js-flexslider ">
        <ul class="slides">
            <li>
                <figure>
                    <div class="image-element">
                        <img src="/styleguide/kss-assets/images/flexslider/content/slide-01.jpg"/>
                        <span class="copyright-element">
                            <span class="copyright">
                                &copy; TU Dortmund
                            </span>
                        </span>
                    </div>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="/styleguide/kss-assets/images/flexslider/content/slide-02.jpg"/>
                    <figcaption>
                        Far far away, behind the word mountain.
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="/styleguide/kss-assets/images/flexslider/content/slide-03.jpg"/>
                </figure>
            </li>
            <li>
                <figure>
                    <div class="image-element">
                        <img src="/styleguide/kss-assets/images/flexslider/content/slide-04.jpg"/>
                        <span class="copyright-element">
                            <span class="copyright">
                                &copy; Hans Tester
                            </span>
                        </span>
                    </div>
                    <figcaption>
                        Far from the countries Vokalia and Consonantia.
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="/styleguide/kss-assets/images/flexslider/content/slide-05.jpg"/>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="/styleguide/kss-assets/images/flexslider/content/slide-06.jpg"/>
                </figure>
            </li>
        </ul>
    </div>
    <div class="flexslider-controls">
        <a href="#" class="btn icon-btn no-txt flex-prev">
            <span class="sr-only">Vorheriger Slide</span>
        </a>
        <div class="controls"></div>
        <a href="#" class="btn icon-btn no-txt flex-next">
            <span class="sr-only">Nächster Slide</span>
        </a>
    </div>
</section>

Source: _3-organisms/modules/_module.lightbox.scss, line 1

7.1.10 Lightbox

If you have a group of items, the same 'rel' attribute value can be used for each of them to create a gallery. Each group should have a unique value.

Note: Lightbox requires https://photoswipe.com/.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <a href="/styleguide/kss-assets/images/lightbox/big/lightbox-01-big.jpg"
               data-lightbox=""
               data-lightbox-width="700"
               data-lightbox-height="467"
               data-lightbox-title=""
               data-lightbox-alternative=""
               data-lightbox-caption="Far far away, behind the word mountains, far from the countries Vokalia and Consonantia."
               data-lightbox-copyright="@ Max Mustermann / Testcorp Inc."
               rel="gallery-01">
                <figure>
                    <div class="image-element">
                        <img class="img-fluid"
                             src="/styleguide/kss-assets/images/lightbox/lightbox-01.jpg"
                             alt="" />
                        <span class="copyright-element">
                            <span class="copyright">
                                &copy; TU Dortmund
                            </span>
                        </span>
                    </div>
                    <figcaption>
                        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
                    </figcaption>
                </figure>
            </a>
        </div>
        <div class="col-sm-6">
            <a href="/styleguide/kss-assets/images/lightbox/big/lightbox-02-big.jpg"
               data-lightbox=""
               data-lightbox-width="700"
               data-lightbox-height="467"
               data-lightbox-title=""
               data-lightbox-alternative=""
               data-lightbox-caption="Far far away, behind the word mountains, far from the countries Vokalia and Consonantia."
               data-lightbox-copyright="@ Max Mustermann / Testcorp Inc."
               rel="gallery-01">
                <figure>
                    <img class="img-fluid"
                         src="/styleguide/kss-assets/images/lightbox/lightbox-02.jpg"
                         alt="" />
                </figure>
            </a>
        </div>
    </div>
</div>

Source: _3-organisms/modules/_modules.text-on-image.scss, line 1

7.1.11 Infobox

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

45.356 Lorem Ipsum

94.365 Dolor sit amet 

<div class="module-text-on-image">
    <div class="module-text-on-image-inner" style="background-image: url(/styleguide/kss-assets/images/content/content-02.jpg);">

        <div class="module-text-on-image-content">
            <header>
                <h2>
                    Lorem ipsum dolor sit amet
                </h2>
            </header>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

            <div class="row info-columns">

                <p class="col">
                    <b>45.356</b>
                    Lorem Ipsum
                </p>

                <p class="col">
                    <b>94.365</b>
                    Dolor sit amet
                </p>

            </div>

        </div>
    </div>
</div>

Example

1936 Eröffnung

34.200 Studierende

300 Professorinnen und Professoren

80 Studiengänge 

<div class="row info-columns">
    <p class="col">
        <b>1936</b>
        Eröffnung
    </p>
    <p class="col">
        <b>34.200</b>
        Studierende
    </p>
    <p class="col">
        <b>300</b>
        Professorinnen und Professoren
    </p>
    <p class="col">
        <b>80</b>
        Studiengänge
    </p>
</div>

Source: _3-organisms/_audio.scss, line 1

7.1.13 Audio

Note that the controlsList attribute is Chrome specific and required to force the download control to NOT be displayed. See Google Developer Updates for details.

Example

<audio controls controlsList="nofullscreen nodownload" preload="auto">
    <source src="/styleguide/kss-assets/audio/demo.mp3" type="audio/mp3">
    <p>Your browser does not support the <code>audio</code> element.</p>
</audio>

Example

Bitte bestätigen Sie die Aktivierung dieses Videos.

Nach der Aktivierung werden Cookies gesetzt und Daten an YouTube (Google) übermittelt.
Zur Datenschutzerklärung von Google 

<div class="outer-video">
    <div class="inner-video" data-preview-src="/styleguide/kss-assets/images/video/preview.jpg">
        <div class="iframe"
             src="https://www.youtube-nocookie.com/embed/-bAN83Jw3Vo?autohide=1&controls=2&modestbranding=1&rel=0&enablejsapi=1&origin=https%3A%2F%2Fwww.tu-dortmund.de&showinfo=0"
             allowfullscreen
             allow="fullscreen"></div>

        <button class="btn btn-primary icon-btn play">
            Video abspielen
            <span class="icon" aria-hidden="true"></span>
        </button>

        <div class="controls">
            <p>
                <strong>
                    Bitte bestätigen Sie die Aktivierung dieses Videos.
                </strong>
            </p>

            <p>
                Nach der Aktivierung werden Cookies gesetzt und Daten an YouTube (Google) übermittelt.
                <br>
                <a href="https://www.google.de/intl/de/policies/privacy/" target="_blank" rel="noreferrer">
                    Zur Datenschutzerklärung von Google
                </a>
            </p>

            <div class="form-group">
                <button class="btn btn-primary icon-btn enable">
                    Ja, Video anzeigen!
                    <span class="icon" aria-hidden="true"></span>
                </button>
                <button class="btn btn-secondary disable">
                    Nein, Video nicht anzeigen!
                </button>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" id="video-privacy-checkbox-5390" type="checkbox" value="1">
                    <label class="form-check-label" for="video-privacy-checkbox-5390">
                        Alle Videos auf der TU Dortmund Webseite aktivieren
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

Example

Dachzeile

Eine Überschrift für den Call to action

Button-Text 

<div class="module-calltoaction" style="background-image:url(/styleguide/kss-assets/images/content/content-02.jpg);">
    <div class="calltoaction-img-overlay">
        <header>
            <span class="kicker text-center">Dachzeile</span>
            <h2 class="text-center">
                Eine Überschrift für den Call to action
            </h2>
        </header>

        <p class="text-center">
            <a href="/studium/bewerben/" class="btn btn-primary icon-btn">
                <span class="icon" aria-hidden="true"></span>
                <span class="btntxt">Button-Text</span>
            </a>
        </p>
    </div>
</div>

<div class="module-img module-img-full module-logo">
    <div class="flexslider-delayed">
        <ul class="slides">
            <li>
                <figure>
                    <div class="image-element">
                        <img class="img-fluid lazyload" data-srcset="/styleguide/kss-assets/images/flexslider/content/slide-01.jpg 285w"/>
                    </div>
                    <figcaption>
                    </figcaption>
                </figure>
            </li>
            <li>
                <a href="#">
                    <figure>
                        <div class="image-element">
                            <img class="img-fluid lazyload" data-srcset="/styleguide/kss-assets/images/flexslider/content/slide-02.jpg 285w"/>
                        </div>
                        <figcaption>
                            <strong>Some title</strong>
                            <p>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                            </p>
                            <span class="link-dummy">
                                <span class="icon" aria-hidden="true"></span>
                            </span>
                        </figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <figure>
                    <div class="image-element">
                        <img class="img-fluid lazyload" data-srcset="/styleguide/kss-assets/images/flexslider/content/slide-03.jpg 285w"/>
                    </div>
                </figure>
            </li>
            <li>
                <figure>
                    <div class="image-element">
                        <img class="img-fluid lazyload" data-srcset="/styleguide/kss-assets/images/flexslider/content/slide-04.jpg 285w"/>
                    </div>
                </figure>
            </li>
            <li>
                <a href="#">
                    <figure>
                        <div class="image-element">
                            <img class="img-fluid lazyload" data-srcset="/styleguide/kss-assets/images/flexslider/content/slide-05.jpg 285w"/>
                        </div>
                        <figcaption>
                            <strong>Some title</strong>
                            <p>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                                sed diam voluptua.
                            </p>
                            <span class="link-dummy">
                                <span class="icon" aria-hidden="true"></span>
                            </span>
                        </figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <figure>
                    <div class="image-element">
                        <img class="img-fluid lazyload" data-srcset="/styleguide/kss-assets/images/flexslider/content/slide-06.jpg 285w"/>
                    </div>
                </figure>
            </li>
        </ul>
    </div>
    <div class="flexslider-controls">
        <a href="#" class="btn icon-btn no-txt flex-prev">
            <span class="sr-only">Vorheriger Slide</span>
        </a>
        <div class="controls"></div>
        <a href="#" class="btn icon-btn no-txt flex-next">
            <span class="sr-only">Nächster Slide</span>
        </a>
    </div>
</div>

<style>
    .module-img.module-logo {
        max-width: 976px;
    }
    .module-img.module-logo img {
        width: 265px;
    }
</style>

Source: _3-organisms/modules/_module.flexslider.scss, line 190

7.1.17 Newsticker

This sliding element may be used for a news ticker component Requires Flexslider.

<div class="newsticker">

    <div class="flexslider carousel flexslider-ticker js-flexslider-ticker">
        <ul class="slides">
            <li>
                <a href="#">
                    <span class="date text-muted">28. Februar 2023</span>
                    <h4>MERCUR fördert zwei neue kooperative Forschungspro-jekte mit rund 700.000 Euro</h4>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="date text-muted">28. Februar 2023</span>
                    <h4>Akademische Jahresfeier im Zeichen drängender Zukunftsfragen</h4>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="date text-muted">28. Februar 2023</span>
                    <h4>Wegweisender SFB endet nach zwölf erfolgreichen Jahren</h4>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="date text-muted">28. Februar 2023</span>
                    <h4>Bei Dortmunder Hochschultagen ins Studium hinein­schnup­pern</h4>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="date text-muted">28. Februar 2023</span>
                    <h4>So spart die TU Dortmund Energie</h4>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="date text-muted">28. Februar 2023</span>
                    <h4>Zwei Projekte erforschen Reichtum</h4>
                </a>
            </li>
        </ul>
    </div>
    <div class="flexslider-ticker__navigation">
        <button class="flex-prev icon-angle-left flexslider-ticker-navigation__button flexslider-ticker-navigation__button--previous"><span class="icon" aria-hidden="true"></span><span class="sr-only">Vorheriger Slide</span></button>
        <button class="flex-next icon-angle-right flexslider-ticker-navigation__button flexslider-ticker-navigation__button--next"><span class="icon" aria-hidden="true"></span><span class="sr-only">Nächster Slide</span></button>
    </div>
</div>

Source: _3-organisms/_table.scss, line 5

7.2.1 Basic tables

The table-* modifiers listed below may be combined in any order to achieve the desired look and feel.

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint respectively.

Examples

Default styling

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

.table-striped

Add zebra-striping to any table row.

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

.table-hover

Enable a hover state on table rows.

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. 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.
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. 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.
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. 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.
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. 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. 
<div class="table-responsive">
    <table class="table {{modifier_class}}">
        <thead>
            <tr>
                <th scope="col">Lorem</th>
                <th scope="col">Ipsum</th>
                <th scope="col">Dolor</th>
                <th scope="col">Sit amet</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>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.</td>
                <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
                <td>At vero eos et accusam et justo duo dolores et ea rebum.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>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.</td>
                <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
                <td>At vero eos et accusam et justo duo dolores et ea rebum.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>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.</td>
                <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
                <td>At vero eos et accusam et justo duo dolores et ea rebum.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>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.</td>
                <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
                <td>At vero eos et accusam et justo duo dolores et ea rebum.</td>
            </tr>
        </tbody>
    </table>
</div>