Styleguide

Front article: List 

<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 eine 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 class="m-front-article {{ modifiers_classes }}">
	<h3 class="m-front-article__title">
		<a href="{{ url }}" class="m-front-article__title-link" tabindex="-1">{{ title }}</a>
	</h3>
	{{#if has-img}}
		<div class="m-front-article__image">
			{{> @a-image img}}
		</div>
	{{/if}}
	{{#if list-items}}
		<ul class="m-front-article__list">
			{{#each list-items}}
				<li class="m-front-article__list-item">{{ . }}</li>
			{{/each}}
		</ul>
	{{else}}
		<p class="m-front-article__text">{{{ text }}}</p>
	{{/if}}
	<div class="m-front-article__link-button">
		{{render '@a-link-button'}}
	</div>
</div>
  • Content: 
    .m-front-article {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly; // mm
	height: 100%; // mm

	&__title {
		@include fluid-props(font-size, $size-tiny, $size-medium, 20px, 24px);
		@include fluid-props(margin-top, $size-tiny, $size-medium, 4px, 12px);
		margin-bottom: 0.5em;
	}

	&--image-second &__title,
	&--no-image &__title {
		margin-top: 0;
	}

	&__title-link {
		@include clean-link;
		line-height: 1.4em;
		color: $color-primary;
		transition: color $transition-fast $transition-ease;
		hyphens: auto;

		@include high-contrast {
			color: $color-primary-dark;
		}

		@include hover {
			color: $color-primary-dark;
		}
	}

	&__image {
		margin-bottom: 12px;
		width: 100%;
		@include aspect-ratio-box(56.25%);
	}

	&--image-first &__image {
		order: -1;
	}

	&__text, &__list {
		margin-top: 0;
		margin-bottom: 0.5em;
	}

	&--stretch {
		height: 100%;
	}

	&--stretch &__link-button {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 10px, 24px);
		@include fluid-props(margin-top, $fluid-min, $fluid-max, 0px, 24px);
	}
}

.o-front-article--double .m-front-article {
	justify-content: flex-start;
}
  • URL: /components/raw/m-front-article/_m-front-article.scss
  • Filesystem Path: styleguide/src/components/molecules/m-front-article/_m-front-article.scss
  • Size: 1.2 KB 
{
  "title": "Gesundes Klima und eine intakte Umwelt",
  "text": "Die Gleichstellung von Mann und Frau ist seit 1981 in der Verfassung verankert und seit 1996 im Gleichstellungsgesetz festgeschrieben. In der Realität ist die Gleichstellung jedoch noch lange nicht erreicht. Frauen sind nach wie vor untervertreten in Kaderpositionen, verdienen deutlich weniger als Männer. Ebenso arbeiten fast alle Männer Vollzeit, aber nur jede zweite Frau.",
  "url": "#",
  "has-img": false,
  "img": {
    "link-url": "#",
    "image-src": "/img/wheat.jpg",
    "alt": "Symbolbild Fair-Food",
    "title": "Fair schmeckt besser"
  },
  "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.