Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Address 

<div class=" address ">
    <p class="address__info">
        <a class="address__link" href="">Rheniumhaus<br>Otto-Hahn-Straße 2<br>95111 Rehau | DE</a>
    </p>

    <p class="address__info">
        <a class="address__link" href="tel:+499283770">+ 49 9283 77-0</a>
    </p>
    <p class="address__info">
        <a class="address__link" href="mailto:info@rehau.com?subject=feedback">info@rehau.com</a>
    </p>
</div>
 
<div class="{{mixes}} address {{modifiers}}">
  <p class="address__info">
    <a class="address__link" href="{{{href}}}">{{{address}}}</a>
  </p>

  {{#each links}}
    <p class="address__info">
      <a class="address__link" href="{{{href}}}">{{{text}}}</a>
    </p>
  {{/each}}
</div>
 
{
  "address": "Rheniumhaus<br>Otto-Hahn-Straße 2<br>95111 Rehau | DE",
  "links": [
    {
      "href": "tel:+499283770",
      "text": "+ 49 9283 77-0"
    },
    {
      "href": "mailto:info@rehau.com?subject=feedback",
      "text": "info@rehau.com"
    }
  ]
}
  • Content: 
    .address {
  &__info {
    margin-bottom: 0;
  }

  &__link {
    &,
    &:hover,
    &:active {
      color: inherit;
    }
  }
}
  • URL: /components/raw/atoms-address/_address.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/06-address/_address.scss
  • Size: 131 Bytes

There are no notes for this item.