HiVolda Styleguide

Carousel 

<section class="row carousel-one row-space-medium">
    <div class="inner-row">
        <h2 class="wg-title">Carousel one</h2>
        <div class="wg-body">
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
        </div>
    </div>
</section>
<section class="row carousel-one-autoplay row-space-medium">
    <div class="inner-row">
        <h2 class="wg-title">Carousel one - Autoplay</h2>
        <div class="wg-body">
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
        </div>
    </div>
</section>
<section class="row carousel-one hint-swipe-horizontal row-space-medium">
    <div class="inner-row">
        <h2 class="wg-title">Carousel - Horizontal swipe hint</h2>
        <div class="wg-body">
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
            <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
        </div>
    </div>
</section>
<section class="row carousel-two row-space-medium">
    <div class="inner-row">

        <div class="wg-header">
            <h1 class="wg-title">Carousel two</h1>

        </div>

        <div class="wg-body">

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

        </div>

        <div class="wg-footer">
            <p><a href="http://testlenke.no" class="arrow-link">Les fleire nyheter fra kategori</a></p>

        </div>

    </div>
</section>

<section class="row carousel-three row-space-medium">
    <div class="inner-row">

        <div class="wg-header">
            <h1 class="wg-title">Carousel three</h1>

        </div>

        <div class="wg-body">

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

        </div>

        <div class="wg-footer">
            <p><a href="http://testlenke.no" class="arrow-link">Les fleire nyheter fra kategori</a></p>

        </div>

    </div>
</section>

<section class="row carousel-two hint-swipe-horizontal row-space-medium">
    <div class="inner-row">

        <div class="wg-header">
            <h1 class="wg-title">Carousel - Horozontal swipe hint</h1>

        </div>

        <div class="wg-body">

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser article ">
                    <a href="http://testlenke.no" class="link-block">
                        <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                        <time datetime="2017-01-09" class="published">09. januar 2017</time>
                        <h1 class="title"> Verdifull boksamling fra Volda</h1>
                        <div class="desc">
                            <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                        </div>
                    </a>
                </article>

            </div>

        </div>

        <div class="wg-footer">
            <p><a href="http://testlenke.no" class="arrow-link">Les fleire nyheter fra kategori</a></p>

        </div>

    </div>
</section>

<section class="row carousel-two no-overlay row-space-medium">
    <div class="inner-row">

        <div class="wg-header">
            <h1 class="wg-title">Carousel two - No overlay</h1>

        </div>

        <div class="wg-body">

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

        </div>

        <div class="wg-footer">
            <p><a href="http://testlenke" class="arrow-link">Sjå fleire hendingar fra biblioteket</a></p>

        </div>

    </div>
</section>

<section class="row carousel-three no-overlay row-space-medium">
    <div class="inner-row">

        <div class="wg-header">
            <h1 class="wg-title">Carousel three - No overlay</h1>

        </div>

        <div class="wg-body">

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

        </div>

        <div class="wg-footer">
            <p><a href="http://testlenke" class="arrow-link">Sjå fleire hendingar fra biblioteket</a></p>

        </div>

    </div>
</section>

<section class="row carousel-three hint-swipe-horizontal row-space-medium">
    <div class="inner-row">

        <div class="wg-header">
            <h1 class="wg-title">Carousel three - No overlay</h1>

        </div>

        <div class="wg-body">

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

            <div class="grid-item">
                <article class="content-teaser event ">
                    <a href="http://testlenke.no" class="link-block">
                        <time class="date-block" datetime="2017-01-09">
                            <span class="day">22</span>
                            <span class="month">mai</span>
                        </time>

                        <h1 class="title">Skrivekveld i bilioteket</h1>

                    </a>
                    <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                    <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                </article>

            </div>

        </div>

        <div class="wg-footer">
            <p><a href="http://testlenke" class="arrow-link">Sjå fleire hendingar fra biblioteket</a></p>

        </div>

    </div>
</section>
 
<section class="row carousel-one row-space-medium">
  <div class="inner-row">
    <h2 class="wg-title">Carousel one</h2>
    <div class="wg-body">
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
    </div>
  </div>
</section>
<section class="row carousel-one-autoplay row-space-medium">
  <div class="inner-row">
    <h2 class="wg-title">Carousel one - Autoplay</h2>
    <div class="wg-body">
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
    </div>
  </div>
</section>
<section class="row carousel-one hint-swipe-horizontal row-space-medium">
  <div class="inner-row">
    <h2 class="wg-title">Carousel - Horizontal swipe hint</h2>
    <div class="wg-body">
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
      <div class="grid-item"><img src="http://placehold.it/1200x450?text=Image" alt=""></div>
    </div>
  </div>
</section>
{% render "@widget-content-list--article", carousel_two, true %}
{% render "@widget-content-list--article", carousel_three, true %}
{% render "@widget-content-list--article", carousel_three_swipe, true %}
{% render "@widget-content-list--event", carousel_two_no_overlay, true %}
{% render "@widget-content-list--event", carousel_three_no_overlay, true %}
{% render "@widget-content-list--event", carousel_three_cal_swipe, true %}
 
{
  "carousel_two": {
    "wg_title": "Carousel two",
    "wg_class": "carousel-two row-space-medium",
    "items": [
      null,
      null,
      null,
      null
    ]
  },
  "carousel_three": {
    "wg_title": "Carousel three",
    "wg_class": "carousel-three row-space-medium",
    "items": [
      null,
      null,
      null,
      null,
      null
    ]
  },
  "carousel_two_no_overlay": {
    "wg_title": "Carousel two - No overlay",
    "wg_class": "carousel-two no-overlay row-space-medium",
    "items": [
      null,
      null,
      null,
      null
    ]
  },
  "carousel_three_no_overlay": {
    "wg_title": "Carousel three - No overlay",
    "wg_class": "carousel-three no-overlay row-space-medium",
    "items": [
      null,
      null,
      null,
      null,
      null
    ]
  },
  "carousel_three_cal_swipe": {
    "wg_title": "Carousel three - No overlay",
    "wg_class": "carousel-three hint-swipe-horizontal row-space-medium",
    "items": [
      null,
      null,
      null,
      null,
      null
    ]
  },
  "carousel_three_swipe": {
    "wg_title": "Carousel - Horozontal swipe hint",
    "wg_class": "carousel-two hint-swipe-horizontal row-space-medium",
    "items": [
      null,
      null,
      null,
      null,
      null
    ]
  }
}

No notes defined.