Styleguide

Front article: No Image 

<div class="m-front-article m-front-article--no-image">
    <h3 class="m-front-article__title">
        <a href="#" class="m-front-article__title-link" tabindex="-1">Gleichstellung: Ein Schwerpunkt der Grünen - seit ihrer Gründung</a>
    </h3>
    <p class="m-front-article__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.</p>
    <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": "Gleichstellung: Ein Schwerpunkt der Grünen - seit ihrer Gründung",
  "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": [
    "no-image"
  ]
}

No notes defined.