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)

HTML
<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">Mehr (optional)<span class="aural"> zu 69% der Weltbevölkerung verwendet das Internet.</span></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">Mehr (optional)<span class="aural"> zu 12 Menschen haben bisher auf dem Mond gewandelt.</span></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">Mehr (optional)<span class="aural"> zu 17 verschiedene Arten von Pinguinen gibt es.</span></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">Mehr (optional)<span class="aural"> zu 9,81 Meter pro Sekunde beträgt die Erdbeschleunigung.</span></a>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>  
</div>

Three Infofigures

Infofigures light

  • 362 aktive Teilnehmer
  • 136 Kommentare
  • 515 Bewertungen
  • 362 aktive Teilnehmer
HTML
<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>