PDJ Brandbox

media-footer 

<footer class="media-footer">
    <div class="section--8">
        <div class="media-footer__content">
            <div class="media-footer__caption caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos commodi error qui harum fuga, sed eius, fugit dolore autem quia.</div>

            <div class="media-footer__share p--2">
                <a href="#" class="link">
                    <span class="link__label">Share this image</span>
                </a>

            </div>
        </div>
    </div>
</footer>
 
<footer class="media-footer">
  <div class="section--8">
    <div class="media-footer__content">
      {{#if caption }}
      <div class="media-footer__caption caption">{{ caption }}</div>
      {{/if}}

      {{#if share }}
      <div class="media-footer__share p--2">
        {{render '@link' share }}
      </div>
      {{/if}}
    </div>
  </div>
</footer>
 
caption: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos commodi
  error qui harum fuga, sed eius, fugit dolore autem quia.
share:
  url: '#'
  label: Share this image
  • Content: 
    .media-footer__content {
  display: block;
  padding: var(--gap--4) var(--gap--4) 0;

  @media (min-width: 750px) {
    display: flex;
    justify-content: space-between;
  }

  @media (min-width: 1100px) {
    padding: var(--gap--8) 0 0;
  }
}

.media-footer__caption {
  display: block;

  @media (min-width: 750px) {
    flex: 1 1 auto;
    max-width: var(--section--4);
    padding-right: var(--gap--20);
  }
}

.media-footer__share {
  margin-top: var(--gap--2);

  @media (min-width: 750px) {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: auto;
  }
}

.media-footer__share:first-child {
  margin-top: 0;
}
  • URL: /components/raw/media-footer/media-footer.scss
  • Filesystem Path: ../src/03_molecules/media-footer/media-footer.scss
  • Size: 622 Bytes

No notes defined.