England Football

Design Spacer: 52 Pixel Spacer With Line And Logo 

<div class="design-spacer design-spacer--blank-52">

    <hr class="design-spacer__lineandlogo" />
    <img src="/assets/example-content/design-spacer-logo.svg" alt="" />
    <hr class="design-spacer__lineandlogo" />
</div>

No notes defined.

{
  "spacing": 52,
  "lineandlogo": true
}
  • Content: 
    .design-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.8rem;
  &--blank {
    &-32 {
      min-height: 3.2rem;
    }
    &-52 {
      min-height: 5.2rem;
    }
    &-72 {
      min-height: 7.2rem;
    }
  }
  &__lineonly {
    border-top: 1px solid $grey;
    width: 100%;
  }
  &__lineandlogo {
    border-top: 1px solid $grey;
    width: 50%;
  }
  img {
    max-width: 4rem;
    max-height: 4rem;
    margin: 0 1rem;
  }

  @media screen and (min-width: $mq-large) {
    padding: 0 6rem;
    img {
      margin: 0 3rem;
    }
  }
}
  • URL: /components/raw/design-spacer/design-spacer.scss
  • Filesystem Path: src/library/components/design-spacer/design-spacer.scss
  • Size: 579 Bytes 
<div class="design-spacer design-spacer--blank-{{spacing}}">
    {{#if lineonly}}
    <hr class="design-spacer__lineonly"/>
    {{/if}}
    
    {{#if lineandlogo}}
    <hr class="design-spacer__lineandlogo"/>
    <img src="/assets/example-content/design-spacer-logo.svg" alt=""/>
    <hr class="design-spacer__lineandlogo"/>
    {{/if}}
</div>