Infofigures

Um Daten strukturiert und übersichtlich darzustellen, insbesondere Daten mit Zahlenwerten, eignet sich das Modul Infofigures.

The Infofigures module can be used for displaying data, especially data containing numerical values, in a structured and clear manner.

.modul-infofigures

Four Infofigures (default)

69% der Weltbevölkerung verwendet das Internet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Optionaler Link
12 Menschen haben bisher auf dem Mond gewandelt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Optionaler Link
17 verschiedene Arten von Pinguinen gibt es.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Optionaler Link
9,81 Meter pro Sekunde beträgt die Erdbeschleunigung.

Dies ist die Geschwindigkeit, mit der Objekte im freien Fall auf der Erde beschleunigt werden. Sie ist nahezu konstant und beeinflusst alles, von einem fallenden Apfel bis hin zu Raumfahrzeugen. Optionaler Link

<div class="modul-infofigures">
    <h2 class="title">Four Infofigures (default)</h2>
    <div class="infofigures__inner">
        <ul>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">69%</span>
                        der Weltbevölkerung verwendet das Internet.
                    </div>
                    <div class="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.
                            <a href="#" class="more">Optionaler Link</a>
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">12</span>
                        Menschen haben bisher auf dem Mond gewandelt.
                    </div>
                    <div class="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.
                            <a href="#" class="more">Optionaler Link</a>
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">17</span>
                        verschiedene Arten von Pinguinen gibt es.
                    </div>
                    <div class="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.
                            <a href="#" class="more">Optionaler Link</a>
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">9,81</span>
                        Meter pro Sekunde beträgt die Erdbeschleunigung.
                    </div>
                    <div class="text">
                        <p>
                            Dies ist die Geschwindigkeit, mit der Objekte im freien Fall auf der Erde beschleunigt werden. Sie ist nahezu konstant und beeinflusst alles, von einem fallenden Apfel bis hin zu Raumfahrzeugen.
                            <a href="#" class="more">Optionaler Link</a>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>  
</div>

Three Infofigures

69% der Weltbevölkerung verwendet das Internet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Optionaler Link
12 Menschen haben bisher auf dem Mond gewandelt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Optionaler Link
17 verschiedene Arten von Pinguinen gibt es.

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

Infofigures light

362 aktive Teilnehmer
136 Kommentare
515 Bewertungen
362 aktive Teilnehmer

<div class="modul-infofigures infofigures--light">
    <h2 class="title">Infofigures light</h2>
    <div class="infofigures__inner">
        <ul>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">362</span>
                        aktive Teilnehmer
                    </div>
                </div>
            </li>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">136</span>
                        Kommentare
                    </div>
                </div>
            </li>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">515</span>
                        Bewertungen
                    </div>
                </div>
            </li>
            <li>
                <div class="infofigure">
                    <div class="title">
                        <span class="textfigure">362</span>
                        aktive Teilnehmer
                    </div>
                </div>
            </li>
        </ul>
    </div>  
</div>