MIUN - Design Library

StandardPage: Startpage Full Width Block 

<main id="main">
    <div class="container-fluid no-padding">
        <div class="row">
            <div class="col-12">
                <div class="content-banner-block ">
                    <div class="content-banner-block-item">
                        <figure data-bg="https://picsum.photos/1200/800" class="lazyload">
                            <img class="sr-only" src="https://picsum.photos/1200/800" alt="">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid overflow-area-container">
        <div class="container ">
            <div class="row">
                <div class="col-12">
                    <div class="overflow-area d-flex justify-content-center align-items-center">
                        <div class="overflow-area-body">
                            <h1 class="heading-level-1">Tema: Digitalisering</h1>
                            <p>På våra forskningssidor hittar du ny, intressant forskning. Just nu på temat digitalisering.</p>
                            <a href="#" class="button-default">Default</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row primary-content-area-top">
                    <div class="col-12">
                        <div class="row">
                            <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>
    </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>
    <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": true,
  "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": "<h2 class=\"heading-level-2\">Sammankomster</h2><p>Studietakt 100 % ges på distans med campusträffar i Sundsvall. Det innebär fyra till fem fysiska sammankomster per termin. En sammankomst varierar mellan 3 och 5 dagar. Det förutsätts att du deltar i sammankomsterna. Under sammankomsterna ingår obligatoriska moment.</p><p>Studietakt 75 % ges på distans med campusträffar i Sundsvall. Det innebär två utbildningsdagar per vecka. Dessa dagar genomförs på campus eller på lärcentranod. Det förutsätts att du deltar i utbildningsdagarna. Under utbildningsdagarna ingår obligatoriska moment.</p><h2 class=\"heading-level-2\">Behörighet</h2><p>Grundläggande behörighet +<br>Matematik B, Naturkunskap B och Samhällskunskap A.<br>Eller:<br>Matematik 2a / 2b / 2c, Naturkunskap 2, Samhällskunskap 1b / 1a1+1a2<br>(OB 16)</p><h2 class=\"heading-level-2\">Examen efter genomförda studier</h2><p>Filosofie kandidatexamen<br>Sjuksköterskeexamen<br>Sjuksköterskeexamen<br>som översätts till Degree of Bachelor of Science in Nursing<br><br>samt<br>Filosofie kandidatexamen med huvudområdet omvårdnad<br>som översätts till<br>Degree of Bachelor of Science with a major in Nursing Science</p><h2 class=\"heading-level-2\">Om utbildningen</h2><p>Utbildningen ges i två varianter:<br>Distans med campusträffar i Sundsvall, studietakt 100 % och Arbetsintegrerad lärarutbildning, distans med campusträffar i Sundsvall, studietakt 75 %. Båda utbildningarna består av ämnesstudier, utbildningsvetenskaplig kärna och verksamhetsförlagd utbildning. Ämnesstudier är en viktig del av utbildningen där svenska, engelska, matematik samt något av ämnena NO och teknik, SO eller Bild, ingår. Utbildningsvetenskaplig kärna behandlar områden som utveckling och lärande, läroplansteorier, konflikthantering och ledarskap. Verksamhetsförlagd utbildning (vfu) sker i samarbete med regionens kommuner och genomförs under totalt 20 veckor. </p><p>Den arbetsintegrerade utbildningen erbjuds i samverkan med kommuner i regionen och innebär att du samtidigt som du studerar arbetar halvtid vid en skola, antingen västra området (Jämtlands län) eller östra området (Västernorrlands län/Hälsingland). Denna variant har endast ämnesinriktningen NO och teknik. För att möjliggöra halvtidsarbete på en skola är studietakten trekvartsfart vilket innebär att utbildningen ges under 11 terminer, se termins – och kursordning på https://www.miun.se/siteassets/avdelningar/utv/programsidan/arbetsintegrerad-grundlararutbildning-ak-4-6.pdf</p><p>Alla lärarutbildningar bygger på vetenskaplig grund och beprövad erfarenhet, därför kommer du i utbildningens olika kurser att arbete med och utveckla färdigheter i vetenskapligt tänkande och skrivande.</p><h2 class=\"heading-level-2\">Efter utbildningen</h2><p>Som sjuksköterska kan du arbeta både i offentlig och privat sektor. Arbetsmarknaden ser ljus ut och det kommer att råda stor efterfrågan på sjuksköterskor framöver. Efter att du tagit examen och arbetat som legitimerad sjuksköterska en tid kan du vidareutbilda dig på Mittuniversitetet genom att läsa magister- eller masterutbildning i omvårdnad eller studera till specialistsjuksköterska inom ett antal områden. Du kan även ansöka om legitimation för att arbeta i andra länder.</p>",
    "epiEditAttribute": ""
  },
  "blockVariant": true,
  "hideIllustratingImage": true,
  "startPage": true,
  "noTitle": false,
  "contentType": "StandardPage",
  "contactAreaTitle": "Kontakt",
  "showTopFullWidthExampleContent": true
}
  • 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.