Styleguide

Initiatives 

<div class="o-front-initiatives ">
    <div class="o-front-initiatives__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Initiatives</span>
        </h2>
    </div>
    <div class="o-front-initiatives__initiatives">
        <div class="o-front-initiatives__initiative">
            <div class="o-front-initiatives__inner">
                <a class="a-initiative-link" href="#">
                    <div class="a-initiative-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Klimaschutz jetzt" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                </a>
            </div>
        </div>
        <div class="o-front-initiatives__initiative">
            <div class="o-front-initiatives__inner">
                <a class="a-initiative-link" href="#">
                    <div class="a-initiative-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Bezahlbares Wohnen" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                </a>
            </div>
        </div>
        <div class="o-front-initiatives__initiative">
            <div class="o-front-initiatives__inner">
                <a class="a-initiative-link" href="#">
                    <div class="a-initiative-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Gleichstellung stärken" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                </a>
            </div>
        </div>
        <div class="o-front-initiatives__initiative">
            <div class="o-front-initiatives__inner">
                <a class="a-initiative-link" href="#">
                    <div class="a-initiative-link__image">
                        <figure class="a-image a-image--cover">

                            <img src="/img/dv.jpg" alt="Biodiversität schützen" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                            <figcaption>

                            </figcaption>
                        </figure>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="o-front-initiatives__more">
        <a href="#" class="a-link-button ">
            Alle Initiativen anzeigen
        </a>
    </div>
</div>
 
<div class="o-front-initiatives {{modifiers_classes}}">
	<div class="o-front-initiatives__cat-title">
		{{> @a-cat-title cat-title}}
	</div>
	<div class="o-front-initiatives__initiatives">
		{{#each rows}}
			<div class="o-front-initiatives__initiative">
				<div class="o-front-initiatives__inner">
					{{> @a-initiative-link this }}
				</div>
			</div>
		{{/each}}
	</div>
	{{#if link-button.url}}
		<div class="o-front-initiatives__more">
			{{> @a-link-button link-button}}
		</div>
	{{/if}}
</div>
  • Content: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.o-front-initiatives {
	max-width: 651px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	// Override padding from grid-item
	padding-left: 0;
	padding-right: 0;
	@include m.fluid-grid-item-props(padding);

	@include m.media(v.$DESKTOP) {
		max-width: v.$grid-max-width-max;
	}

	&__cat-title {
		margin-bottom: 4px;
		@include m.fluid-grid-item-props(margin-left);

		@include m.media(v.$DESKTOP) {
			margin-bottom: 25px;
		}
	}

	&__initiatives {
		width: 100%;
		display: grid;
		align-items: stretch;
		grid-template-columns: 1fr;
	}

	&__inner {
		border-bottom: 1px solid v.$color-grey-2;
		height: 100%;
	}

	&__initiative {
		width: 100%;
		@include m.fluid-grid-item-props(padding-left padding-right);

		@include m.media(v.$MOBILE) {
			padding-left: 0;
			padding-right: 0;
		}

		@include m.hover {
			background-color: v.$color-grey-1;
		}

		&:last-child .o-front-initiatives__inner {
			border-bottom: none;
		}
	}

	&__more {
		padding-top: 8px;
		@include m.fluid-grid-item-props(padding-left);
	}
}
  • URL: /components/raw/o-front-initiatives/_o-front-initiatives.scss
  • Filesystem Path: styleguide/src/components/organisms/o-front-initiatives/_o-front-initiatives.scss
  • Size: 1.1 KB 
{
  "cat-title": {
    "label": "Initiatives"
  },
  "link-button": {
    "label": "Alle Initiativen anzeigen",
    "url": "#"
  },
  "rows": [
    {
      "link": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Klimaschutz jetzt",
        "title": "This is a linked image"
      }
    },
    {
      "link": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Bezahlbares Wohnen",
        "title": "This is a linked image"
      }
    },
    {
      "link": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Gleichstellung stärken",
        "title": "This is a linked image"
      }
    },
    {
      "link": "#",
      "image": {
        "image-src": "/img/dv.jpg",
        "alt": "Biodiversität schützen",
        "title": "This is a linked image"
      }
    }
  ]
}

No notes defined.