Styleguide

Footer cta 

<section class="m-footer-cta">
    <h2 class="m-footer-cta__title">Engagiere dich</h2>
    <div class="m-footer-cta__button">
        <button type="button" class="a-button a-button--secondary a-button--full-width">Newsletter abonnieren</button>
    </div>
    <div class="m-footer-cta__button">
        <button type="button" class="a-button a-button--outline a-button--secondary a-button--full-width">Mitglied werden</button>
    </div>
    <div class="m-footer-cta__button">
        <button type="button" class="a-button a-button--outline a-button--secondary a-button--full-width">Spenden</button>
    </div>
</section>
 
<section class="m-footer-cta">
	<h2 class="m-footer-cta__title">{{ title }}</h2>
	{{#each ctas}}
		<div class="m-footer-cta__button">
			{{> @a-button .}}
		</div>
	{{/each}}
</section>
  • Content: 
    .m-footer-cta {
	display: flex;
	flex-direction: column;

	&__title {
		margin-top: 0;
		margin-bottom: 40px;
		color: $color-secondary;
		@include fluid-props(font-size, $size-tiny, $size-medium, 20px, 32px);
	}

	&__button {
		margin-bottom: 25px;
		font-size: 0.875rem;
	}
}
  • URL: /components/raw/m-footer-cta/_m-footer-cta.scss
  • Filesystem Path: styleguide/src/components/molecules/m-footer-cta/_m-footer-cta.scss
  • Size: 278 Bytes 
{
  "title": "Engagiere dich",
  "ctas": [
    {
      "newsletter": null,
      "label": "Newsletter abonnieren",
      "modifiers": [
        "secondary",
        "full-width"
      ]
    },
    {
      "attach": null,
      "label": "Mitglied werden",
      "modifiers": [
        "outline",
        "secondary",
        "full-width"
      ]
    },
    {
      "donate": null,
      "label": "Spenden",
      "modifiers": [
        "outline",
        "secondary",
        "full-width"
      ]
    }
  ]
}

No notes defined.