Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Dealer 

<div class="dealer -premium">
    <div class="dealer__header">
        <p class="h4 dealer__headline" data-index="10">
            Wilhelm Rothemund
        </p>
        <p class="dealer__distance">Entfernung: 10.8 km</p>
        <p class="dealer__description">Here goes dealer description</p>
        <p class="dealer__products">
            <strong>Produktgruppen</strong>
            Flächenheizung /-kühlung, Hausabflusssysteme, RAUTITAN, Solarthermie, VACUCLEAN, Wärmepumpe
        </p>
    </div>
    <div class="dealer__content">
        <div class="dealer__contacts">
            <p>Very long Adderss Am Graben 7<br>95111 Rehau</p>
            <p>
                Tel: 09252/5443<br>
                Fax: 09252/927760<br>
                <a href="mailto:example@example.com">veryverylongexample@example.com</a><br>
                <a href="http://www.example.com" target="_blank">http://www.example.com</a>
            </p>
        </div>
        <div class="dealer__position">
            <span class="dealer__btn btn -secondary -chevron-right" href="#"> Map
            </span>
            <span class="dealer__btn btn -secondary -chevron-right" href="#"> Route
            </span>
        </div>
    </div>
</div>
<div class="dealer">
    <div class="dealer__header">
        <p class="h4 dealer__headline" data-index="10">
            Wilhelm Rothemund
        </p>
        <p class="dealer__distance">Entfernung: 10.8 km</p>
        <p class="dealer__description">Here goes dealer description</p>
        <p class="dealer__products">
            <strong>Produktgruppen</strong>
            Flächenheizung /-kühlung, Hausabflusssysteme, RAUTITAN, Solarthermie, VACUCLEAN, Wärmepumpe
        </p>
    </div>
    <div class="dealer__content">
        <div class="dealer__contacts">
            <p>Am Graben 7<br>95111 Rehau</p>
            <p>
                Tel: 09252/5443<br>
                Fax: 09252/927760<br>
                <a href="mailto:example@example.com">example@example.com</a><br>
                <a href="http://www.example.com" target="_blank">http://www.example.com</a>
            </p>
        </div>
        <div class="dealer__position">
            <span class="dealer__btn btn -secondary -chevron-right" href="#"> Map
            </span>
            <span class="dealer__btn btn -secondary -chevron-right" href="#"> Route
            </span>
        </div>
    </div>
</div>
<div class="dealer">
    <div class="dealer__header">
        <p class="h4 dealer__headline" data-index="10">
            Wilhelm Rothemund
        </p>
        <p class="dealer__distance">Entfernung: 10.8 km</p>
        <p class="dealer__products">
            <strong>Produktgruppen</strong>
            Flächenheizung /-kühlung, Hausabflusssysteme, RAUTITAN, Solarthermie, VACUCLEAN, Wärmepumpe
        </p>
    </div>
    <div class="dealer__content">
        <div class="dealer__contacts">
            <p>Am Graben 7<br>95111 Rehau</p>
            <p>
                Tel: 09252/5443<br>
                Fax: 09252/927760<br>
                <a href="mailto:example@example.com">example@example.com</a><br>
                <a href="http://www.example.com" target="_blank">http://www.example.com</a>
            </p>
        </div>
        <div class="dealer__position">
            <span class="dealer__btn btn -secondary -chevron-right" href="#"> Map
            </span>
            <span class="dealer__btn btn -secondary -chevron-right" href="#"> Route
            </span>
        </div>
    </div>
</div>
 
<div class="dealer -premium">
  <div class="dealer__header">
    <p class="h4 dealer__headline" data-index="10">
      Wilhelm Rothemund
    </p>
    <p class="dealer__distance">Entfernung: 10.8 km</p>
    <p class="dealer__description">Here goes dealer description</p>
    <p class="dealer__products">
      <strong>Produktgruppen</strong>
      Flächenheizung /-kühlung, Hausabflusssysteme, RAUTITAN, Solarthermie, VACUCLEAN, Wärmepumpe
    </p>
  </div>
  <div class="dealer__content">
    <div class="dealer__contacts">
      <p>Very long Adderss Am Graben 7<br>95111 Rehau</p>
      <p>
        Tel: 09252/5443<br>
        Fax: 09252/927760<br>
        <a href="mailto:example@example.com">veryverylongexample@example.com</a><br>
        <a href="http://www.example.com" target="_blank">http://www.example.com</a>
      </p>
    </div>
    <div class="dealer__position">
      {{render '@atoms-button--secondary' mapButton merge=true}}
      {{render '@atoms-button--secondary' routeButton merge=true}}
    </div>
  </div>
</div>
<div class="dealer">
  <div class="dealer__header">
    <p class="h4 dealer__headline" data-index="10">
      Wilhelm Rothemund
    </p>
    <p class="dealer__distance">Entfernung: 10.8 km</p>
    <p class="dealer__description">Here goes dealer description</p>
    <p class="dealer__products">
      <strong>Produktgruppen</strong>
      Flächenheizung /-kühlung, Hausabflusssysteme, RAUTITAN, Solarthermie, VACUCLEAN, Wärmepumpe
    </p>
  </div>
  <div class="dealer__content">
    <div class="dealer__contacts">
      <p>Am Graben 7<br>95111 Rehau</p>
      <p>
        Tel: 09252/5443<br>
        Fax: 09252/927760<br>
        <a href="mailto:example@example.com">example@example.com</a><br>
        <a href="http://www.example.com" target="_blank">http://www.example.com</a>
      </p>
    </div>
    <div class="dealer__position">
      {{render '@atoms-button--secondary' mapButton merge=true}}
      {{render '@atoms-button--secondary' routeButton merge=true}}
    </div>
  </div>
</div>
<div class="dealer">
  <div class="dealer__header">
    <p class="h4 dealer__headline" data-index="10">
      Wilhelm Rothemund
    </p>
    <p class="dealer__distance">Entfernung: 10.8 km</p>
    <p class="dealer__products">
      <strong>Produktgruppen</strong>
      Flächenheizung /-kühlung, Hausabflusssysteme, RAUTITAN, Solarthermie, VACUCLEAN, Wärmepumpe
    </p>
  </div>
  <div class="dealer__content">
    <div class="dealer__contacts">
      <p>Am Graben 7<br>95111 Rehau</p>
      <p>
        Tel: 09252/5443<br>
        Fax: 09252/927760<br>
        <a href="mailto:example@example.com">example@example.com</a><br>
        <a href="http://www.example.com" target="_blank">http://www.example.com</a>
      </p>
    </div>
    <div class="dealer__position">
      {{render '@atoms-button--secondary' mapButton merge=true}}
      {{render '@atoms-button--secondary' routeButton merge=true}}
    </div>
  </div>
</div>
 
{
  "mapButton": {
    "tag": "span",
    "href": "#",
    "mixes": "dealer__btn",
    "title": "Map"
  },
  "routeButton": {
    "tag": "span",
    "href": "#",
    "mixes": "dealer__btn",
    "title": "Route"
  }
}
  • Content: 
    .dealer {
  $root: &;

  padding: $base-padding $base-padding 2 * $base-padding;
  border-bottom: 1px solid $gray-light;

  &.-premium {
    padding-top: 2 * $base-padding;
    border-bottom: 0 none;
    background-color: $gray-lighter;
  }

  &__header {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2 * $base-margin;
  }

  &__content {
    @include breakpoint(medium) {
      display: flex;
      flex-flow: row nowrap;
    }
  }

  &__headline {
    flex-grow: 1;
    color: $black;

    &::before {
      content: attr(data-index);
      margin-left: -$base-margin;
      padding: 0 $base-padding;
      background-color: $gray-light;

      #{$root}.-premium & {
        background-color: $white;
      }
    }
  }

  &__description,
  &__products {
    flex-basis: 100%;
    margin-bottom: $base-margin / 4;
  }

  &__contacts {
    display: flex;
    flex: 1;
    flex-flow: row wrap;

    > p {
      padding-right: $base-padding;

      @include breakpoint(medium) {
        &:first-child {
          flex: 1 1 auto;
          max-width: 50%;
        }
      }
    }
  }

  &__position {
    flex: 0 1 auto;
    margin-top: 2 * $base-margin;

    @include breakpoint(medium) {
      margin-top: 0;
    }
  }

  &__distance {
    white-space: nowrap;

    &:not(:last-child) {
      margin-bottom: $base-margin;
    }
  }

  &__btn {
    display: block;
    margin-top: $base-margin;
  }
}
  • URL: /components/raw/molecules-dealer/_dealer.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/15-dealer/_dealer.scss
  • Size: 1.4 KB

There are no notes for this item.