HiVolda Styleguide

Generic 

<div class="campus-wrapper">
    <header tabindex="-1" class="campus-header">
        <h1 class="campus-header__logo-heading">
            <a href="" class="campus-header__logo-link">
                <img src="/images/hivolda-logo-white.svg" alt="Hivolda logo" class="campus-header__logo">
            </a>
        </h1>

        <div class="campus-header__clock">12:39</div>
    </header>

    <main class="campus-wrapper__main">

        <div class="campus-generic">
            <figure class="campus-generic__image-container">
                <img src="/images/campus-generic.jpg" alt="Image" class="campus-generic__image">
            </figure>

            <div class="campus-generic__wrapper">
                <div class="campus-generic__content">
                    <h1>h1 - Lorem ipsum dolor sit amet.</h1>
                    <h2>h2 - Lorem ipsum dolor sit amet.</h2>
                    <h3>h3 - Lorem ipsum dolor sit amet.</h3>
                    <p>p - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, deleniti dolorum est facilis fugiat ipsam nisi quaerat similique sit voluptatibus? Ab deserunt dicta illo ipsum possimus quae, voluptates! Fuga, odit?</p>
                    <ul>
                        <li>ul - Lorem item 1</li>
                        <li>ul - Lorem item 2</li>
                    </ul>
                    <ol>
                        <li>ol - Lorem item 1</li>
                        <li>ol - Lorem item 2</li>
                    </ol>
                </div>
            </div>
        </div>

    </main>
</div>
 
{% extends "@wrapper" %}
{% block main %}
    <div class="campus-generic">
        <figure class="campus-generic__image-container">
            <img src="/images/campus-generic.jpg" alt="Image" class="campus-generic__image">
        </figure>

        <div class="campus-generic__wrapper">
            <div class="campus-generic__content">
                <h1>h1 - Lorem ipsum dolor sit amet.</h1>
                <h2>h2 - Lorem ipsum dolor sit amet.</h2>
                <h3>h3 - Lorem ipsum dolor sit amet.</h3>
                <p>p - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, deleniti dolorum est facilis fugiat ipsam nisi quaerat similique sit voluptatibus? Ab deserunt dicta illo ipsum possimus quae, voluptates! Fuga, odit?</p>
                <ul>
                    <li>ul - Lorem item 1</li>
                    <li>ul - Lorem item 2</li>
                </ul>
                <ol>
                    <li>ol - Lorem item 1</li>
                    <li>ol - Lorem item 2</li>
                </ol>
            </div>
        </div>
    </div>
{% endblock %}
 
/* No context defined. */

No notes defined.