<section class="m-footer-contact">
    <h2 class="m-footer-contact__title">Kontakt</h2>
    <div class="m-footer-contact__flex">
        <div class="m-footer-contact__text">
            <p><strong>Grüne Schweiz</strong><br><strong>Les Verts suisses</strong><br>Waisenhausplatz 21<br>3011 Bern</p>
            <p>031 326 66 00<br>Postkonto 80-26747-3</p>
            <p><a href='mailto:gruene@gruene.ch' class='a-button'>E-Mail senden</a></p>
        </div>
        <div class="m-footer-contact__social">
            <a href="https://www.facebook.com/gruenelesverts/" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>facebook</title>
                        <use xlink:href="#facebook"></use>
                    </svg>

                </figure>
            </a>
            <a href="https://twitter.com/GrueneCH" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>twitter</title>
                        <use xlink:href="#twitter"></use>
                    </svg>

                </figure>
            </a>
            <a href="https://www.instagram.com/gruenelesverts/" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>instagram</title>
                        <use xlink:href="#instagram"></use>
                    </svg>

                </figure>
            </a>
        </div>
    </div>
</section>
<section class="m-footer-contact">
	<h2 class="m-footer-contact__title">{{title}}</h2>
	<div class="m-footer-contact__flex">
		<div class="m-footer-contact__text">{{{address}}}</div>
		<div class="m-footer-contact__social">
			{{> @a-social-icon facebook}}
			{{> @a-social-icon twitter}}
			{{> @a-social-icon instagram}}
		</div>
	</div>
</section>
  • Content:
    .m-footer-contact {
    	&__title {
    		margin-top: 0;
    		margin-bottom: 40px;
    		@include fluid-props(font-size, $size-tiny, $size-medium, 20px, 32px);
    	}
    
    	&__text p {
    		font-size: 0.875rem;
    	}
    
    	&__text > p:first-of-type {
    		margin-top: 0;
    	}
    
    	&__flex {
    		display: flex;
    		justify-content: space-between;
    	}
    
    	&__social {
    		width: 32px;
    
    		a {
    			height: 32px;
    			margin-bottom: 16px;
    		}
    	}
    
    	&__text {
    		max-width: calc(100% - 48px);
    	}
    }
    
  • URL: /components/raw/m-footer-contact/_m-footer-contact.scss
  • Filesystem Path: styleguide/src/components/molecules/m-footer-contact/_m-footer-contact.scss
  • Size: 437 Bytes
{
  "title": "Kontakt",
  "address": "<p><strong>Grüne Schweiz</strong><br><strong>Les Verts suisses</strong><br>Waisenhausplatz 21<br>3011 Bern</p><p>031 326 66 00<br>Postkonto 80-26747-3</p><p><a href='mailto:gruene@gruene.ch' class='a-button'>E-Mail senden</a></p>",
  "button": {
    "label": "E-Mail senden",
    "link": "mailto:gruene@gruene.ch"
  },
  "facebook": {
    "type": "facebook",
    "link": "https://www.facebook.com/gruenelesverts/"
  },
  "twitter": {
    "type": "twitter",
    "link": "https://twitter.com/GrueneCH"
  },
  "instagram": {
    "type": "instagram",
    "link": "https://www.instagram.com/gruenelesverts/"
  }
}

No notes defined.