Sharing

Information

Folder
src/components/patterns/sharing

Files

Schema 
// src/components/patterns/sharing/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/sharing
additionalProperties: false
required:
  - headline
  - share
properties:
  headline:
    type: string
  subline:
    type: string
  copy:
    type: string
  media:
    $ref: /elements/media-template
  share:
    $ref: /elements/share
Mocks 
// src/components/patterns/sharing/mocks.yaml

media:
  $ref: /elements/media-template
  is_portrait: false
  legal: null
  caption: null
  image:
    $tpl: elements/image
    width: 288
    height: 255
    src: https://via.placeholder.com/288x255
    alt: Alternative text
    sources:
      - width: 261
        height: 231
        srcset: >-
          https://via.placeholder.com/261x231 1x,
          https://via.placeholder.com/522x462 2x
        media: '(max-width: 35.5625rem)'
      - width: 456
        height: 403
        srcset: >-
          https://via.placeholder.com/456x403 1x,
          https://via.placeholder.com/912x806 2x
        media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
      - width: 294
        height: 260
        srcset: >-
          https://via.placeholder.com/294x260 1x,
          https://via.placeholder.com/588x520 2x
        media: '(min-width: 60rem) and (max-width: 79.9375rem)'
      - width: 288
        height: 255
        srcset: >-
          https://via.placeholder.com/288x255 1x,
          https://via.placeholder.com/576x510 2x
        media: '(min-width: 80rem)'
headline: Berichten Sie vom Spenden
subline: Und helfen Sie uns so noch mehr Gutes zum tun
copy: >-
  Jede Spende zählt! Motivieren Sie durch Ihren Beitrag Freunde, Familie und
  Bekannte dazu es Ihnen gleich zu tun und uns zu unterstützen.
share:
  $ref: /elements/share
  centered_on_mobile: true
  url: https://random.url
$variants:
  - $name: Image with caption and copyright
    media:
      legal: copyright
      caption: >-
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores,
        rerum!
  - $name: Without image
    media: false
    share:
      centered_on_mobile: false
Template 
// src/components/patterns/sharing/sharing.html.twig

{% set share = share|merge({class: "Sharing-share"}) %}

<div class="Sharing u-container u-grid{% if class %} {{ class }}{% endif %}{% if not media%} Sharing--withoutMedia{% endif %}">
  {% if media %}
    <div class="Sharing-image">
      {% include "@elements/media-template/media-template.html.twig" with media only %}
    </div>
  {% endif %}
  <div class="Sharing-text">
    {% if headline %}
      <p class="Sharing-headline u-typo-headline3">{{ headline }}</p>
    {% endif %}
    {% if subline %}
      <p class="Sharing-subline {{ media ? 'u-typo-big-copy-subline' : 'u-typo-copy-bold' }}">{{ subline }}</p>
    {% endif %}
    {% if copy %}
      <p class="Sharing-copy">{{ copy }}</p>
    {% endif %}
    {% if share %}
      {% include "@elements/share/share.html.twig" with share only %}
    {% endif %}
  </div>
</div>

Variants

default
Open
Image with caption and copyright
Open
Without image
Open