Swegon Component Library

Contact Card Simple 

<div class="contact-card-simple">
    <figure class="contact-card-simple__figure">
        <img src="/mocks/img/alexander-miletti.png" alt="Robert Kristiansson, VD Swegon Sverige" class="contact-card-simple__image">
    </figure>
    <div class="contact-card-simple__details">
        <h5 class="contact-card-simple__name">Robert Kristiansson</h5>

        <span class="contact-card-simple__title">VD Swegon Sverige</span>

        <a href="tel:011-32 15 21" type="tel" class="contact-card-simple__link">011-32 15 21</a>
        <a href="tel:070-516 21 65" type="tel" class="contact-card-simple__link">070-516 21 65</a>
        <a href="mailto:robert.kristiansson@swegon.se" type="email" class="contact-card-simple__link">Send e-mail</a>
    </div>
</div>
 
<div class="contact-card-simple">
    <figure class="contact-card-simple__figure">
        <img src="{{ image.src }}" alt="{{ image.alt }}" class="contact-card-simple__image">
    </figure>
    <div class="contact-card-simple__details">
        <h5 class="contact-card-simple__name">{{ name }}</h5>

        <span class="contact-card-simple__title">{{{ title }}}</span>

        {{#each links}}
            <a href="{{ href }}" type="{{ type }}" class="contact-card-simple__link">{{ label }}</a>
        {{/each}}
    </div>
</div>
 
{
  "layoutMaxWidth": "500px",
  "image": {
    "src": "/mocks/img/alexander-miletti.png",
    "alt": "Robert Kristiansson, VD Swegon Sverige"
  },
  "name": "Robert Kristiansson",
  "title": "VD Swegon Sverige",
  "links": [
    {
      "type": "tel",
      "href": "tel:011-32 15 21",
      "label": "011-32 15 21"
    },
    {
      "type": "tel",
      "href": "tel:070-516 21 65",
      "label": "070-516 21 65"
    },
    {
      "type": "email",
      "href": "mailto:robert.kristiansson@swegon.se",
      "label": "Send e-mail"
    }
  ]
}
  • Content: 
    .contact-card-simple {
    display: flex;
    flex-direction: column;
    margin-bottom: size(4);
}

.contact-card-simple__figure {
    position: relative;
    margin: 0;
    margin-bottom: size(2);

    &:after {
        content: '';
        display: block;
        padding-bottom: 100%;
    }
}

.contact-card-simple__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.contact-card-simple__name,
.contact-card-simple__title,
.contact-card-simple__link {
    display: block;
}
  • URL: /components/raw/contact-card-simple/contact-card-simple.scss
  • Filesystem Path: src/components/contact-card-simple/contact-card-simple.scss
  • Size: 517 Bytes

No notes defined.