MIUN - Design Library

ContactBlock: Default 

<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 class="contactblock d-flex flex-row flex-wrap pt-sm">
    {{#if linkUrl}}
    <a href="{{linkUrl}}">
        <div class="contactblock--image lazyload" data-bg="{{imageUrl}}"
            <img class="sr-only" src="{{imageUrl}}" alt="">
        </div>
    </a>
    {{/if}}
    {{#unless linkUrl}}
    <div class="contactblock--image lazyload" data-bg="{{imageUrl}}" >
        <img class="sr-only" src="{{imageUrl}}" alt="{{fullName}}">
    </div>
    {{/unless}}
    <div class="contactblock--info d-flex flex-column">
        <h3 class="contactblock--fullname heading-level-3">
                {{#if linkUrl}}
                <a href="{{linkUrl}}" title="{{fullName}}">
                    {{fullName}}
                </a>
                {{/if}}
                {{#unless linkUrl}}
                {{fullName}}
                {{/unless}}
        </h3>
        <p class="contactblock--title mb-0">
            {{contactTitle}}
        </p>
        <a class="contactblock--email mb-0" href="mailto:{{email}}">
            <p class="mb-0">{{email}}</p>
        </a>
        <p class="contactblock--phone mb-0">
            {{phone}}
        </p>
    </div>
</div>
 
{
  "linkUrl": "",
  "fullName": "Robert Pettersson",
  "contactTitle": "VD Miun Holding AB",
  "email": "robert.pettersson@miun.se",
  "phone": "010-142 82 15",
  "imageUrl": "https://picsum.photos/600/400",
  "epiDivClass": "col-md-12"
}
  • Content: 
    .contactblock{
    padding: $xs-space 0 $xs-space;
      
     .contactblock--image {
       margin-right: $xs-space;
       width: 80px;
       height: 80px;
       border-radius: 50%;
       background-repeat: no-repeat;
       background-size: cover;
       background-position: top center;
       @include media-breakpoint-down(sm) {
        margin-bottom: $xs-space;
      }
     }
     .contactblock--email{
       p{
         color: $blue;
       }
     }
 
}
  • URL: /components/raw/contactblock/ContactBlock.scss
  • Filesystem Path: src\components\02-block_components\ContactBlock\ContactBlock.scss
  • Size: 489 Bytes

There are no notes for this item.