Styleguide

Sharing 

<div class="social-media-sharing">
    <h4>Diese Seite teilen via</h4>
    <ul class="">
        <li>
            <a share title="E-Mail">
                <i class="fal fa-envelope fa-fw"></i>
            </a>
        </li>
        <li>
            <a share title="Facebook">
                <i class="fab fa-facebook-f fa-fw"></i>
            </a>
        </li>
        <li>
            <a share title="X">
                <i class="fab fa-x-twitter fa-fw"></i>
            </a>
        </li>
        <li>
            <a share title="Linked In">
                <i class="fab fa-facebook-f fa-fw"></i>
            </a>
        </li>
        <li>
            <a share title="XING">
                <i class="fab fa-xing fa-fw"></i>
            </a>
        </li>
    </ul>
</div>
 
<div class="social-media-sharing">
    <h4>{{ title }}</h4>
    <ul class="">
    {% set classes = [
    'share'
    ]
    %}
    {% for element in elements %}
      {% if element.forward_dialog == 1 %}
        {% set classes = classes|merge(['use-ajax']) %}
        {% set dialogType = "data-dialog-type=dialog" %}
        {% set dialogOptions = "data-dialog-options=" ~ {'width': '600'}|json_encode %}
      {% endif %}
        <li>
            <a {{ dialogType }} {{ dialogOptions }} {{ element.attr.target }} {{ element.attr.class.addClass(classes) }}  {{ element.api }}
          title="{{ element.text }}">
          {% if element.img %}
                {{ element.img }}
            {% else %}
                {{ element.text }}
            {% endif %}
            </a>
        </li>
    {% endfor %}
  </ul>
</div>
 
{
  "title": "Diese Seite teilen via",
  "text": "",
  "elements": [
    {
      "element": null,
      "text": "E-Mail",
      "img": "<i class=\"fal fa-envelope fa-fw\"></i>",
      "api": "",
      "attr": "",
      "forward_dialog": ""
    },
    {
      "element": null,
      "text": "Facebook",
      "img": "<i class=\"fab fa-facebook-f fa-fw\"></i>",
      "api": "",
      "attr": "",
      "forward_dialog": ""
    },
    {
      "element": null,
      "text": "X",
      "img": "<i class=\"fab fa-x-twitter fa-fw\"></i>",
      "api": "",
      "attr": "",
      "forward_dialog": ""
    },
    {
      "element": null,
      "text": "Linked In",
      "img": "<i class=\"fab fa-facebook-f fa-fw\"></i>",
      "api": "",
      "attr": "",
      "forward_dialog": ""
    },
    {
      "element": null,
      "text": "XING",
      "img": "<i class=\"fab fa-xing fa-fw\"></i>",
      "api": "",
      "attr": "",
      "forward_dialog": ""
    }
  ]
}
  • Content: 
    .social-media-sharing {
	border-top: 1px solid $secondary;
	display: inline-flex;
	flex-direction: column;
	padding: 1rem 0;

	margin-top: 0;

	@include media-breakpoint-up(lg) {
		margin-top: 10rem;
	}

	h4 {
		@extend .text-base;
		margin-bottom: 1.5rem;
		color: $color-dark-grey;
	}

	ul {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			margin-right: 1.5rem;

			a {
				cursor: pointer;
				color: $color-dark-grey;
				svg {
					font-size: 2rem;
				}
				&:hover {
					color: $primary;
				}
			}
		}
	}
}

.section-wrapper > .container > .social-media-sharing {
	margin-top: 0;
}
  • URL: /components/raw/sharing/sharing.scss
  • Filesystem Path: components/02-components/sharing/sharing.scss
  • Size: 617 Bytes

There are no notes for this item.