MIUN - Design Library

StandardPage: No Content 

<main id="main">
    <div class="container-fluid no-padding">
    </div>

    <div class="container">
        <div class="row breadcrumbs">
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <div class="breadcrumbs-container row">
                    <div class="col-12 col-lg-8 breadcrumb-col">
                        <nav aria-label="Breadcrumbs" class="mr-auto">
                            <ol class="breadcrumb ">
                                <li class="breadcrumb-item"><a href="/">Hem</a></li>
                                <li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
                                <li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
                                <li class="breadcrumb-item active" aria-current="page">En sjukt lång text som egentligen inte borde vara här. Men så blir det när man behöver testa vissa saker. :)</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-12 col-lg-4 breadcrumb-col enablevue">
                        <nav class="breadcrumbs-actions float-md-left float-lg-right" aria-label="Page functions" id="breadcrumbs">
                            <ul class="page-functions-list list-unstyled">
                                <li v-if="isSetAsFavourite" id='remove-bookmark-container' class="page-functions-list-item">
                                    <a href="javascript:void(0)" id="bookmarkremove" class="small-font" v-on:click="removeFavourite()">
                                    <i class="material-icons blue">favorite</i>
                                    <span>Ta bort favorit</span>
                                </a>
                                </li>
                                <li v-else id="save-bookmark-container" class="page-functions-list-item">
                                    <a href="javascript:void(0)" id="bookmarksave" class="small-font" v-on:click="addFavourite()">
                                    <i class="material-icons">favorite_border</i>
                                    <span>Spara</span>
                                </a>
                                </li>
                                <li class="page-functions-list-item">
                                    <div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
                                        <a rel="nofollow" class="rsbtn_play" accesskey="L" title="webReader" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=5305&amp;lang=sv_se&amp;readid=maincontent;url=">
                                        <span class="rsbtn_left rsimg rspart"><span
                                                class="rsbtn_text"><span>Lyssna</span></span></span>
                                        <span class="rsbtn_right rsimg rsplay rspart"></span>
                                    </a>
                                    </div>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row title-container">
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <h1 class="heading-level-1">Rubrik</h1>
            </div>
        </div>
    </div>

    <div id="maincontent">
        <div class="container">
            <div class="row preamble-container">
                <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                    <p class="preamble">
                        Turismforskningscentret ETOUR utvecklar och kommunicerar kunskap om turism och resande. Verksamheten innefattar forskning, utbildning,<br>samt dialog och samverkan med turistnäringens aktörer.
                    </p>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row illustrating-image-container">
                <div class="col-12">
                    <figure class="mw-920 mx-auto" epi-data-moj="asefd">
                        <img class="img-fluid illustrating-image lazyload" data-src="/images/top-img.jpeg" alt="En alternativ text">
                        <figcaption>En bildtext om bilden är under rubrik.</figcaption>
                    </figure>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row primary-content-area-top">
                <div class="col-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="link-block" data-link="https://aftonbladet.se">
                                <div class="link-block-item">
                                    <figure class="lazyload" data-bg="https://picsum.photos/600/400">
                                        <img class="sr-only lazyload" data-src="https://picsum.photos/600/400" alt="Ons 12 dec">
                                        <figcaption>Ons 12 dec</figcaption>
                                    </figure>
                                    <h2 class="heading-level-3"><a href="https://aftonbladet.se">Half width</a></h2>
                                    <p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>

                                </div>
                            </div>

                        </div>
                        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                            <div class="link-block" data-link="https://aftonbladet.se">
                                <div class="link-block-item">
                                    <figure class="lazyload" data-bg="https://picsum.photos/600/400">
                                        <img class="sr-only lazyload" data-src="https://picsum.photos/600/400" alt="Ons 12 dec">
                                        <figcaption>Ons 12 dec</figcaption>
                                    </figure>
                                    <h2 class="heading-level-3"><a href="https://aftonbladet.se">Half width</a></h2>
                                    <p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>

                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="link-block" data-link="https://aftonbladet.se">
                                <div class="link-block-item">
                                    <figure class="lazyload" data-bg="https://picsum.photos/600/400">
                                        <img class="sr-only lazyload" data-src="https://picsum.photos/600/400" alt="Ons 12 dec">
                                        <figcaption>Ons 12 dec</figcaption>
                                    </figure>
                                    <h2 class="heading-level-3"><a href="https://aftonbladet.se">Half width</a></h2>
                                    <p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>

                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="link-block" data-link="https://aftonbladet.se">
                                <div class="link-block-item">
                                    <figure class="lazyload" data-bg="https://picsum.photos/600/400">
                                        <img class="sr-only lazyload" data-src="https://picsum.photos/600/400" alt="Ons 12 dec">
                                        <figcaption>Ons 12 dec</figcaption>
                                    </figure>
                                    <h2 class="heading-level-3"><a href="https://aftonbladet.se">Half width</a></h2>
                                    <p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row primary-content-area">
                <div class="col-12">
                    <div class="row">
                        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                            <div class="news-block block-border-top mb-md enablevue">
                                <div class="block-header">
                                    <h2 class="heading-level-2">Aktuellt</h2>
                                    <div class="block-action">
                                        <a href="http://www.google.com">Visa fler</a>
                                    </div>
                                </div>
                                <section class="block-content">
                                    <article class="article-block">
                                        <h3 class="heading-level-3">
                                            <a href="https://google.com">Arbetsmigration blir ett sätt att ta makten över sin livssituation</a>
                                        </h3>
                                        <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med. bortom utbildningsplaner och
                                            litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
                                        <p class="small-font mt-xs">23 november 2018</p>
                                    </article>
                                    <article class="article-block">
                                        <div class="row">
                                            <div class="col-12 col-md-3">
                                                <a href="https://apple.com">
                <img class="article-image lazyload" data-src="https://picsum.photos/600/400" alt="Bild">
            </a>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                <h3 class="heading-level-3">
                                                    <a href="https://apple.com">Prisas för forskningsartikel om musikfestivalen Peace &amp; Love</a>
                                                </h3>
                                                <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
                                            </div>
                                        </div>
                                    </article>
                                    <article class="article-block">
                                        <h3 class="heading-level-3">
                                            <a href="https://aftonbladet.se">Nu kan effekten av evenemang mätas på ett helt nytt sätt</a>
                                        </h3>
                                        <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med. bortom utbildningsplaner och
                                            litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
                                        <p class="small-font mt-xs">23 november 2018</p>
                                    </article>
                                    <article class="article-block">
                                        <div class="caption">
                                            Ons 12 dec
                                        </div>
                                        <h3 class="heading-level-3">
                                            <a href="https://blocket.se">Svenska folkets friluftsvanor studeras i nationell undersökning</a>
                                        </h3>
                                        <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
                                        <p class="small-font mt-xs">23 november 2018</p>
                                    </article>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row secondary-content-area">
            <div class="col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="link-block" data-link="https://google.com">
                            <div class="link-block-item">
                                <figure class="lazyload" data-bg="https://picsum.photos/600/400">
                                    <img class="sr-only lazyload" data-src="https://picsum.photos/600/400" alt="Ons 12 dec">
                                    <figcaption>Ons 12 dec</figcaption>
                                </figure>
                                <h2 class="heading-level-3"><a href="https://google.com">Full width</a></h2>
                                <p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container  ">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 mt-lg contact-content-area">
                <div class="row block-header">
                    <div class="col-12">
                        <h2 class="heading-level-2">Kontakt</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="contactblock d-flex flex-row flex-wrap pt-sm">
                            <div class="contactblock--image lazyload" data-bg="https://picsum.photos/600/400">
                                <img class="sr-only" src="https://picsum.photos/600/400" alt="Robert Pettersson">
                            </div>
                            <div class="contactblock--info d-flex flex-column">
                                <h3 class="contactblock--fullname heading-level-3">
                                    Robert Pettersson
                                </h3>
                                <p class="contactblock--title mb-0">
                                    VD Miun Holding AB
                                </p>
                                <a class="contactblock--email mb-0" href="mailto:robert.pettersson@miun.se">
                                    <p class="mb-0">robert.pettersson@miun.se</p>
                                </a>
                                <p class="contactblock--phone mb-0">
                                    010-142 82 15
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row tag-content-area">
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <div class="row">
                    <div class="col-12">
                        <a class="button-small button-tag" href="https://www.miun.se/om/biomekanik/">Biomekanik</a>
                        <a class="button-small button-tag" href="https://www.miun.se/om/biomekanik/">Biomekanik</a>
                        <a class="button-small button-tag" href="https://www.miun.se/om/biomekanik/">Biomekanik</a>
                        <a class="button-small button-tag" href="https://www.miun.se/om/biomekanik/">Biomekanik</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
 
{{!< ../_preview-page}}
<main id="main">
    {{> '@topfullwidthcontentarea' .}}

    {{#unless hideIllustratingImage}}
    {{#if showIllustratingImageTopmost}}
    {{#if illustratingImage.url}}
    <div class="container-fluid no-padding">
        <div class="row illustrating-image-top" style="z-index: -1;">
            <div class="col-md-12">
                <figure {{{illustratingImage.epiEditAttribute}}}
                    style="background-image:url({{illustratingImage.url}});">
                    <img class="sr-only illustrating-image" src="{{ illustratingImage.url }}"
                        alt="{{illustratingImage.altText}}">
                </figure>
            </div>
        </div>
    </div>
    {{/if}}
    {{/if}}
    {{/unless}}

    {{#if startPage}}
    <div class="container-fluid overflow-area-container">
        <div class="container {{#if isIntranetStartPage}}block-white-background{{/if}}">
            {{> '@topprimarycontentarea' .}}
            {{> '@primarycontentarea' .}}
        </div>
    </div>
    {{/if}}

    {{#unless startPage}}

    {{render '@breadcrumbs' }}

    {{#if highlightedText}}
    <div class="container">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <span class="heading-level-5 highlighted-text">
                    {{{highlightedText}}}
                </span>
            </div>
        </div>
    </div>
    {{/if}}
    {{titleImage.url}}
    {{#unless noTitle}}
    <div class="container">
        <div class="row title-container" {{#if subHeaderInfo}}style="margin-bottom: 20px !important;" {{/if}}>
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                {{#if titleImage.value}}
                <img {{{titleImage.epiEditAttribute}}} src="{{titleImage.value}}" alt="">
                <h1 {{{title.epiEditAttribute}}} class="heading-level-1 sr-only">{{title.value}}</h1>
                {{else}}
                <h1 class="heading-level-1" {{{title.epiEditAttribute}}}>{{title.value}}</h1>
                {{/if}}
            </div>
        </div>
    </div>
    {{/unless}}

    {{#if subHeaderInfo}}
    <div class="container" style="margin-bottom: 30px;">
        <div class="row">
            <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <div class="sub-header-info">
                    <div class="occurance-text small-font">
                        {{{subHeaderInfo.occuranceText}}}
                    </div>
                    <div class="location small-font">
                        {{{subHeaderInfo.location}}}
                    </div>
                    <div class="calendar-action small-font">
                        <a class="small-font" href="{{subHeaderInfo.calendarUrl}}"><span
                                class="material-icons">event</span> {{subHeaderInfo.calendarText}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{/if}}

    {{/unless}}
    <div id="maincontent">
        {{#if preamble.value}}
        <div class="container">
            <div class="row preamble-container">
                <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                    <p {{{preamble.epiEditAttribute}}} class="preamble">
                        {{{preamble.value}}}
                    </p>
                </div>
            </div>
        </div>
        {{/if}}

        {{#unless hideIllustratingImage}}
        {{#unless showIllustratingImageTopmost}}
        {{#if illustratingImage.url}}
        <div class="container-fluid">
            <div class="row illustrating-image-container">
                <div class="col-12">
                    <figure class="mw-920 mx-auto" {{{illustratingImage.epiEditAttribute}}}>
                        <img class="img-fluid illustrating-image lazyload" data-src="{{ illustratingImage.url }}"
                            alt="{{illustratingImage.altText}}">
                        <figcaption>{{{illustratingImage.imageText}}}</figcaption>
                    </figure>
                </div>
            </div>
        </div>
        {{/if}}
        {{/unless}}
        {{/unless}}



        {{#unless startPage}}
        {{#epiblockareahascontent 'TopPrimaryContentArea'}}
        <div class="container">
            <div class="row primary-content-area-top">
                <div class="col-12">
                    {{#epiblockarea 'TopPrimaryContentArea'}}
                    <div class="row">
                        <div class="col-md-12">
                            {{render '@linkedcontentbannerblock--half-width'}}
                        </div>
                        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                            {{render '@linkedcontentbannerblock--half-width'}}
                        </div>
                        <div class="col-md-6">
                            {{render '@linkedcontentbannerblock--half-width'}}
                        </div>
                        <div class="col-md-6">
                            {{render '@linkedcontentbannerblock--half-width'}}
                        </div>
                    </div>
                    {{/epiblockarea}}
                </div>
            </div>
        </div>
        {{/epiblockareahascontent}}
        {{/unless}}
        {{#if isStandardPage}}
        {{> '@standardpagecontent' .}}
        {{/if}}
        {{#if isProgramPage}}
        {{render '@programpagecontent'}}
        {{/if}}
        {{#if isSubjectPage }}
        {{render '@subjectpagecontent'}}
        {{/if}}
        {{#if isPersonPage }}
        {{render '@personpagecontent'}}
        {{/if}}
        {{#if isInterviewPage }}
        {{render '@interviewpagecontent'}}
        {{/if}}
        {{#if isTagsPage }}
        {{render '@tagspagecontent'}}
        {{/if}}
        {{#if isWelcomeLetterPage}}
        {{render '@welcomelettercontent'}}
        {{/if}}
        {{#if isFaqPage }}
        {{render '@faqpagecontent'}}
        {{/if}}
        {{#if isCoursePage}}
        {{render '@coursepagecontent'}}
        {{/if}}
        {{#if isCoursePlanPage}}
        {{render '@courseplanpagecontent'}}
        {{/if}}
        {{#if isEducationPlanPage}}
        {{render '@educationplanpagecontent'}}
        {{/if}}
        {{#if isProgramCoursesPage}}
        {{render '@programcoursespagecontent'}}
        {{/if}}
        {{#if isCoursePackagePage}}
        {{render '@coursepackagepagecontent'}}
        {{/if}}
        {{#if isSignTemplatePage}}
        {{render '@signtemplatepagecontent'}}
        {{/if}}
        {{#if isJobListPage}}
        {{render '@joblistpagecontent'}}
        {{/if}}
        {{#if isJobPage}}
        {{render '@jobpagecontent'}}
        {{/if}}
        {{#if isStudentNominationCourseListing}}
        {{render '@studentnominationcourselisting'}}
        {{/if}}
        {{#if isStudentNominationContent}}
            {{render '@studentnominationcontent'}}
        {{/if}}
        {{#if isStudentNominationCartContent}}
            {{render '@studentnominationcartcontent'}}
        {{/if}}
        {{#if isFaqItemPageContent}}
            {{render '@faqitempagecontent'}}
        {{/if}}
         {{#if isCreateNewsPageContent}}
            {{render '@createnewspagecontent'}}
        {{/if}}
        {{#if isNewsEventPageContent}}
            {{render '@newseventpagecontent'}}
        {{/if}}
        {{#if author}}
        <div class="container mb-md">
            <div class="row">
                <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                    {{{author}}}
                </div>
            </div>
        </div>
        {{/if}}

        {{#unless startPage}}
                {{#epiblockareahascontent 'PrimaryContentArea'}}
                <div class="container">
                    <div class="row primary-content-area">
                        <div class="col-12">
                            {{#epiblockarea 'PrimaryContentArea'}}
                            <div class="row">
                                <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                                    {{render '@newsblock'}}
                                </div>
                            </div>
                            {{/epiblockarea}}
                        </div>
                    </div>
                </div>
                {{/epiblockareahascontent}}
        {{/unless}}
    </div>
    {{#unless educationPages}}
    {{> '@secondarycontentarea' .}}
    {{> '@contactcontentarea' .}}
    {{> '@tagscontentarea' .}}
    {{/unless}}
    {{#if educationPages}}
        {{> '@contactcontentarea' .}}
        {{> '@tagscontentarea' .}}
        {{> '@secondarycontentarea' .}}
        {{#epiblockareahascontent 'Settings_ExtraProgramContentArea'}}
            <div class="container-fluid bottom-program-course-content">
                <div class="container">
                    <div class="row primary-content-area">
                        <div class="col-12">
                            {{#epiblockarea 'Settings_ExtraProgramContentArea'}}
                                <div class="row">
                                    <div class="col-12">
                                            {{render '@linkedcontentbannerblock'}}
                                    </div>
                                </div>
                            {{/epiblockarea}}
                        </div>
                    </div>
                </div>
            </div>
        {{/epiblockareahascontent}}
    {{/if}}
</main>
 
{
  "pageId": 13,
  "pageTitle": "Miuns hemsida",
  "illustratingImage": {
    "url": "/images/top-img.jpeg",
    "altText": "En alternativ text",
    "imageText": "En bildtext om bilden är under rubrik.",
    "epiEditAttribute": "epi-data-moj=\"asefd\""
  },
  "showIllustratingImageTopmost": false,
  "title": {
    "value": "Rubrik",
    "epiEditAttribute": ""
  },
  "titleImage": {
    "value": null,
    "epiEditAttribute": ""
  },
  "preamble": {
    "value": "Turismforskningscentret ETOUR utvecklar och kommunicerar kunskap om turism och resande. Verksamheten innefattar forskning, utbildning,<br>samt dialog och samverkan med turistnäringens aktörer.",
    "epiEditAttribute": ""
  },
  "content": {
    "value": "",
    "epiEditAttribute": ""
  },
  "blockVariant": true,
  "hideIllustratingImage": false,
  "startPage": false,
  "noTitle": false,
  "contentType": "StandardPage",
  "contactAreaTitle": "Kontakt"
}
  • Content: 
    .container-fluid.no-padding + .overflow-area-container {
    .overflow-area {
        margin-top: -80px;
        margin-bottom: 50px;
    }
}

.container-fluid.no-padding + .container-fluid.overflow-area-container{
    .primary-content-area-top{
        padding-top: 0px;
    }
}

.container-fluid.overflow-area-container + .container{
    .secondary-content-area{
        padding-top: 50px;
    }
}
.secondary-content-area{
    
}

.overflow-area-container {
    padding-bottom: 1px;
    background-color: #F9F7F6;

    .overflow-area {
        min-height: 300px;
        margin-top: 50px;
        margin-bottom: 0px;
        display: flex;
        text-align: center;
        align-items: center;
        
        padding: 0 50px 0 50px;

        @include media-breakpoint-up(lg) {
            padding: 0 100px 0 100px;
        }

        @include media-breakpoint-up(xl) {
            padding: 0 190px 0 190px;
        }

        background-color: #fff;
        box-shadow: $box-shadow;
        
        .overflow-area-header {
            padding: 30px 0;
            text-align: right;

            a {
                color: $dark-grey;
        
                span {
                    vertical-align: middle;
                    margin-right: 5px;
                    font-size: 20px;
                }
            }
        }
    }
}

.highlighted-text {
    display: inline-block;
    margin-bottom: 20px;
    padding: 2px 20px;
    background-color: $orange;
    color: #fff;
}

.sub-header-info {
    display: flex;

    a {
        color: $dark-grey;
    }

    a span {
        margin-right: 5px;
        vertical-align: middle;
        line-height: 1px;
        font-size: 16px;
    }

    div:not(:last-child) {
        margin-right: 20px;
    }
}
  • URL: /components/raw/standardpage/StandardPage.scss
  • Filesystem Path: src\components\03-pages\StandardPage\StandardPage.scss
  • Size: 1.9 KB

Blockens ordning ska vara som på bilden.