Styleguide

Positions 

<article class="o-positions">
    <div class="o-positions__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Standpunkte</span>
        </h2>
    </div>
    <div class="o-positions__articles">
        <div class="o-positions__article">
            <div class="m-front-article m-front-article--list m-front-article--no-image">
                <h3 class="m-front-article__title">
                    <a href="" class="m-front-article__title-link" tabindex="-1">Gesundes Klima und intakte Umwelt</a>
                </h3>
                <ul class="m-front-article__list">
                    <li class="m-front-article__list-item">Klimakatastrophe abwenden - Erneuerbare fördern</li>
                    <li class="m-front-article__list-item">Bahn, Bus und Velo statt Stau und Gestank</li>
                    <li class="m-front-article__list-item">Raumplanung statt Siedlungsbrei</li>
                </ul>
                <div class="m-front-article__link-button">
                    <a href="#" class="a-link-button ">
                        Weiterlesen
                    </a>

                </div>
            </div>
        </div>
        <div class="o-positions__article">
            <div class="m-front-article m-front-article--list m-front-article--no-image">
                <h3 class="m-front-article__title">
                    <a href="" class="m-front-article__title-link" tabindex="-1">Solidarität, Gleichstellung, Chancengleichheit</a>
                </h3>
                <ul class="m-front-article__list">
                    <li class="m-front-article__list-item">Klimakatastrophe abwenden - Erneuerbare fördern</li>
                    <li class="m-front-article__list-item">Bahn, Bus und Velo statt Stau und Gestank</li>
                    <li class="m-front-article__list-item">Raumplanung statt Siedlungsbrei</li>
                </ul>
                <div class="m-front-article__link-button">
                    <a href="#" class="a-link-button ">
                        Weiterlesen
                    </a>

                </div>
            </div>
        </div>
        <div class="o-positions__article">
            <div class="m-front-article m-front-article--list m-front-article--no-image">
                <h3 class="m-front-article__title">
                    <a href="" class="m-front-article__title-link" tabindex="-1">Nachhaltige und faire Wirtschaft</a>
                </h3>
                <ul class="m-front-article__list">
                    <li class="m-front-article__list-item">Klimakatastrophe abwenden - Erneuerbare fördern</li>
                    <li class="m-front-article__list-item">Bahn, Bus und Velo statt Stau und Gestank</li>
                    <li class="m-front-article__list-item">Raumplanung statt Siedlungsbrei</li>
                </ul>
                <div class="m-front-article__link-button">
                    <a href="#" class="a-link-button ">
                        Weiterlesen
                    </a>

                </div>
            </div>
        </div>
        <div class="o-positions__article">
            <div class="m-front-article m-front-article--list m-front-article--no-image">
                <h3 class="m-front-article__title">
                    <a href="" class="m-front-article__title-link" tabindex="-1">Frieden und globale Gerechtigkeit</a>
                </h3>
                <ul class="m-front-article__list">
                    <li class="m-front-article__list-item">Klimakatastrophe abwenden - Erneuerbare fördern</li>
                    <li class="m-front-article__list-item">Bahn, Bus und Velo statt Stau und Gestank</li>
                    <li class="m-front-article__list-item">Raumplanung statt Siedlungsbrei</li>
                </ul>
                <div class="m-front-article__link-button">
                    <a href="#" class="a-link-button ">
                        Weiterlesen
                    </a>

                </div>
            </div>
        </div>
    </div>
</article>
 
<article class="o-positions">
	<div class="o-positions__cat-title">
		{{> @a-cat-title cat-title}}
	</div>
	<div class="o-positions__articles">
		{{#each articles}}
			<div class="o-positions__article">
				{{> @m-front-article this }}
			</div>
		{{/each}}
	</div>
</article>
  • Content: 
    .o-positions {
	@extend .grid-item;

	@include media($_DESKTOP) {
		max-width: $grid-max-width-max;
	}

	&__cat-title {
		margin-bottom: 22px;

		@include media($_DESKTOP) {
			margin-bottom: 47px;
		}
	}

	&__articles {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		@include fluid-props(grid-column-gap, $size-medium, $grid-max-width-max, $grid-gap-min, $grid-gap-max);
		grid-row-gap: 40px;
		align-items: start;

		@include media($_DESKTOP) {
			grid-template-columns: 1fr 1fr;
			grid-row-gap: 64px;
			align-items: start;
		}

		&--1 {
			grid-template-columns: 1fr;
		}

		&--3 {
			@include media($grid-max-width-max) {
				grid-template-columns: 1fr 1fr 1fr;
			}
		}
	}

	&__article {
		width: 100%;

		@include media($_DESKTOP) {
			&:nth-of-type(even) {
				@include fluid-grid-item-props(padding-left);
			}

			&:nth-of-type(odd) {
				@include fluid-grid-item-props(padding-right);
			}
		}

		&--1, &--3 {
			@include media($grid-max-width-max) {
				&:nth-of-type(even) {
					padding-left: 0;
				}
				&:nth-of-type(odd) {
					padding-right: 0;
				}
			}
		}

		@include only_ie10_above {
			&:nth-of-type(even) {
				padding: 30px 0;
			}
		}
	}
}
  • URL: /components/raw/o-positions/_o-positions.scss
  • Filesystem Path: styleguide/src/components/organisms/o-positions/_o-positions.scss
  • Size: 1.2 KB 
{
  "cat-title": {
    "label": "Standpunkte"
  },
  "articles": [
    {
      "article": null,
      "title": "Gesundes Klima und intakte Umwelt",
      "has-img": false,
      "modifiers": [
        "list",
        "no-image"
      ],
      "list-items": [
        "Klimakatastrophe abwenden - Erneuerbare fördern",
        "Bahn, Bus und Velo statt Stau und Gestank",
        "Raumplanung statt Siedlungsbrei"
      ]
    },
    {
      "article": null,
      "title": "Solidarität, Gleichstellung, Chancengleichheit",
      "has-img": false,
      "modifiers": [
        "list",
        "no-image"
      ],
      "list-items": [
        "Klimakatastrophe abwenden - Erneuerbare fördern",
        "Bahn, Bus und Velo statt Stau und Gestank",
        "Raumplanung statt Siedlungsbrei"
      ]
    },
    {
      "article": null,
      "title": "Nachhaltige und faire Wirtschaft",
      "has-img": false,
      "modifiers": [
        "list",
        "no-image"
      ],
      "list-items": [
        "Klimakatastrophe abwenden - Erneuerbare fördern",
        "Bahn, Bus und Velo statt Stau und Gestank",
        "Raumplanung statt Siedlungsbrei"
      ]
    },
    {
      "article": null,
      "title": "Frieden und globale Gerechtigkeit",
      "has-img": false,
      "modifiers": [
        "list",
        "no-image"
      ],
      "list-items": [
        "Klimakatastrophe abwenden - Erneuerbare fördern",
        "Bahn, Bus und Velo statt Stau und Gestank",
        "Raumplanung statt Siedlungsbrei"
      ]
    }
  ]
}

No notes defined.