MIUN - Design Library

Article: Image 

<article class="article-block">
    <div class="row">
        <div class="col-12 col-md-3">
            <a href="https://google.com">
                <img class="article-image lazyload" data-src="https://picsum.photos/600/400" alt="Alt-text">
            </a>
        </div>
        <div class="col-12 col-md-9">
            <h3 class="heading-level-3">
                <a href="https://google.com">Mittuniversitetet på SM-veckan</a>
            </h3>
            <p>28 januari - 3 februari pågår SM-veckan i Sundsvall. Mittuniversitetet finns på plats med monter på Gärdehov under veckans senare del.</p>
            <p class="small-font mt-xs">23 november 2018</p>
        </div>
    </div>
</article>
 
<article class="article-block">
    {{#if imageUrl}}
    <div class="row">
        <div class="col-12 col-md-3">
            <a href="{{articleUrl}}">
                <img class="article-image lazyload" data-src="{{imageUrl}}" alt="{{imageAlt}}">
            </a>
        </div>
        <div class="col-12 col-md-9">
            <h3 class="heading-level-3">
                {{#if articleUrl}}
                <a href="{{articleUrl}}">{{title}}</a>
                {{else}}
                {{title}}
                {{/if}}
            </h3>
            {{#if ingressText}}
            <p>{{{ingressText}}}</p>
            {{/if}}
            {{#unless hideDate}}
            <p class="small-font mt-xs">{{secondaryText}}</p>
            {{/unless}}
        </div>
    </div>
    {{else}}
    {{#if caption}}
    <div class="caption">
        {{caption}}
    </div>
    {{/if}}
    <h3 class="heading-level-3">
        {{#if articleUrl}}
        <a href="{{articleUrl}}">{{title}}</a>
        {{else}}
        {{title}}
        {{/if}}
    </h3>
    {{#if ingressText}}
    <p>{{{ingressText}}}</p>
    {{/if}}
    {{#unless hideDate}}
    <p class="small-font mt-xs">{{secondaryText}}</p>
    {{/unless}}
    {{/if}}
</article>
 
{
  "title": "Mittuniversitetet på SM-veckan",
  "imageUrl": "https://picsum.photos/600/400",
  "imageAlt": "Alt-text",
  "caption": null,
  "articleUrl": "https://google.com",
  "ingressText": "28 januari - 3 februari pågår SM-veckan i Sundsvall. Mittuniversitetet finns på plats med monter på Gärdehov under veckans senare del.",
  "secondaryText": "23 november 2018",
  "hideDate": false,
  "epiDivClass": "col-md-8 offset-md-2"
}
  • Content: 
    article {
  &.article-block{
    margin-bottom: $md-space;
    &:last-child{
      margin-bottom: 0px;
    }
  }
  h3 {
    a {
      font-style: normal;
      font-family: "Lato Bold";
      color: $dark-grey;
    }
  }
  p {
    margin-bottom: $xs-space;
    &.small-font {
      margin-bottom: 0px;
    }
  }
  .article-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;

    @include media-breakpoint-down(md) {
      margin-bottom: $xs-space;
    }
  }
}
  • URL: /components/raw/article/Article.scss
  • Filesystem Path: src\components\01-global_components\Article\Article.scss
  • Size: 505 Bytes

There are no notes for this item.