MIUN - Design Library

InterviewBlock 

<div class="row">
    <div class="col-md-10 offset-md-1">
        <section class="block interview-block">
            <div class="interview-block-item">
                <blockquote class="blockquote-in-slider">
                    <p>Det är kul på skolan och jag lär mig massor att diskutera med alla medstudenter</p>
                    <div class="quote-image" style="background-image: url(https://picsum.photos/400/400)">
                        <img class="sr-only" src="https://picsum.photos/400/400" alt="">
                    </div>
                </blockquote>
                <cite><a href="https://google.com">Läs hela intervjun med Kalle Andersson</a></cite>
            </div>
            <div class="interview-block-item">
                <blockquote class="blockquote-in-slider">
                    <p>Möjligheten att kunna planera min mina studier runt min vardag underlättar otroligt mycket</p>
                    <div class="quote-image" style="background-image: url(https://picsum.photos/400/400)">
                        <img class="sr-only" src="https://picsum.photos/400/400" alt="">
                    </div>
                </blockquote>
                <cite><a href="https://google.com">Läs hela intervjun med Maja Andersson</a></cite>
            </div>
            <div class="interview-block-item">
                <blockquote class="blockquote-in-slider">
                    <p>Om det behövs så kan man alltid vändas sig till lärarna för att få den hjälp man behöver</p>
                    <div class="quote-image" style="background-image: url(https://picsum.photos/400/400)">
                        <img class="sr-only" src="https://picsum.photos/400/400" alt="">
                    </div>
                </blockquote>
                <cite><a href="https://google.com">Läs hela intervjun med Frida Persson</a></cite>
            </div>
        </section>
    </div>
</div>
 
<div class="row">
    <div class="col-md-10 offset-md-1">
        <section class="block interview-block">
            {{#each items}}
                <div class="interview-block-item">
                    <blockquote class="blockquote-in-slider">
                        <p>{{quote}}</p>
                        <div class="quote-image" style="background-image: url({{imageUrl}})">
                            <img class="sr-only" src="{{imageUrl}}" alt="">
                        </div>
                    </blockquote>
                    <cite><a href="{{interviewUrl}}">{{text}}</a></cite>
                </div>
            {{/each}}
        </section>
    </div>
</div>
 
{
  "epiDivClass": "col-12",
  "quoteImageUrl": "Static/images/quote.svg",
  "items": [
    {
      "quote": "Det är kul på skolan och jag lär mig massor att diskutera med alla medstudenter",
      "text": "Läs hela intervjun med Kalle Andersson",
      "imageUrl": "https://picsum.photos/400/400",
      "interviewUrl": "https://google.com"
    },
    {
      "quote": "Möjligheten att kunna planera min mina studier runt min vardag underlättar otroligt mycket",
      "text": "Läs hela intervjun med Maja Andersson",
      "imageUrl": "https://picsum.photos/400/400",
      "interviewUrl": "https://google.com"
    },
    {
      "quote": "Om det behövs så kan man alltid vändas sig till lärarna för att få den hjälp man behöver",
      "text": "Läs hela intervjun med Frida Persson",
      "imageUrl": "https://picsum.photos/400/400",
      "interviewUrl": "https://google.com"
    }
  ]
}
  • Content: 
    $(document).ready(function() {
    $('.interview-block').slick({
        arrows: false,
        dots: true,
        autoplay: false,
        autoplaySpeed: 10000,
    });
});
  • URL: /components/raw/interviewblock/InterviewBlock.js
  • Filesystem Path: src\components\02-block_components\InterviewBlock\InterviewBlock.js
  • Size: 181 Bytes
  • Content: 
    blockquote:not(.blockquote-in-slider) {
    color: $dark-grey;
    position: relative;
    transition: all 0.3s ease;
    margin-top: 80px;
    margin-bottom: 80px;
        transition: all 0.3s ease;
        font-size: 16px;
        line-height: 24px;
        font-family: "Lato Bold Italic";
        max-width: 635px;
        padding-left: 14%;
        @include media-breakpoint-up(sm) {
            font-size: 18px;
            line-height: 30px;
            padding-left: 14%;
        }
        @include media-breakpoint-up(md) {
            font-size: 24px;
            line-height: 36px;
            padding-left: 17%;
        }
        @include media-breakpoint-up(lg) {
            font-size: 24px;
            line-height: 36px;
            padding-left: 11%;
        }
    &:before {
        transition: all 0.3s ease;
        content: '';
        position: absolute;
        display: block;
        top: 4px;
        left: 0;
        width: 32px;
        height: 25px;
        // width: 64px;
        // height: 50px;
        background-image: url('/Static/images/quote.svg');
        background-size: 32px 25px;
        // background-size: 64px 50px;
        background-repeat: no-repeat;
        background-position: center;
        @include media-breakpoint-up(sm) {
            width: 42px;
            height: 35px;
            background-size: 42px 35px !important;
        }
        @include media-breakpoint-up(md) {
            width: 64px;
            height: 50px;
            background-size: 64px 50px !important;
        }

    }
}


.interview-block-item {
    position: relative;
    min-height: 25px;
    padding: 0 5px 0 47px;

    blockquote {
        position: relative;

        p {
            display: inline-block;
            width: calc(100% - 90px);
            margin: 0;
            font-family: 'Lato Bold Italic';
            &::before {
                content: '”';
            }
            &:after {
                content: '”';
            }
        }
    
        .quote-image {
            position: absolute;
            top: 0;
            right: 0;
            display: block !important;
            border-radius: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            width: 80px;
            height: 80px;
        }
    }

    cite {
        display: block;
        width: calc(100% - 150px);
        @include media-breakpoint-down(md) {
            width: calc(100% - 90px);
        }
        a {
            color: $dark-grey;
        }
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 25px;
        background-image: url('/images/quote.svg');
        background-size: 32px 25px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.interview-block {
    padding: 30px 15px 60px 15px;
    background-color: $bg-grey;
    margin-bottom: 50px !important;
}

// .quote-carousel {
    
// }

.interview-block { display: none; }
.interview-block.slick-initialized { display: block; }

.slick-dots {
    bottom: 15px;
}

.slick-dots li.slick-active button:before {
    color: $orange;
    opacity: 1;
}

.slick-dots li button:before {
    color: $dark-grey;
    font-size: 8px;
    opacity: .3;
}

@include media-breakpoint-up(md) {
    .interview-block-item {
        min-height: 120px;
        padding: 0 95px 0 190px;

        blockquote {
            p {
                width: calc(100% - 150px);
            }

            .quote-image {
                width: 120px;
                height: 120px;
            }
        }

        &:before {
            left: 90px;
            width: 64px;
            height: 50px;
            background-size: 54px 50px;
        }
    }
}
  • URL: /components/raw/interviewblock/InterviewBlock.scss
  • Filesystem Path: src\components\02-block_components\InterviewBlock\InterviewBlock.scss
  • Size: 4 KB
  • Handle: @interviewblock
  • Preview:
  • Filesystem Path: src\components\02-block_components\InterviewBlock\InterviewBlock.hbs

There are no notes for this item.