<article class="o-front-article o-front-article--single">
<div class="o-front-article__cat-title">
<h2 class="a-cat-title">
<a class="a-cat-title__link" href="#">Kampagne</a>
</h2>
</div>
<div class="o-front-article__articles">
<div class="o-front-article__article">
<div class="m-front-article m-front-article--image-first">
<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>
<div class="m-front-article__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/equality.jpg" alt="Symbolbild Fair-Food" title="Fair schmeckt besser" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<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>
</div>
<footer class="o-front-article__cta">
<div class="o-front-article__cta-button">
<button type="button" class="a-button a-button--secondary">Aktiv werden</button>
</div>
<div class="o-front-article__cta-label">
Ich will mich für Gleichstellung einsetzen
</div>
</footer>
</article>
<article class="o-front-article {{modifiers_classes}}">
<div class="o-front-article__cat-title">
{{> @a-cat-title cat-title}}
</div>
{{#if mm}}
<div class="o-front-article__quote">
<svg role="img">
<title>{{quote}}</title>
<use xlink:href="#quote"></use>
</svg>
</div>
{{/if}}
<div class="o-front-article__articles">
{{#each articles}}
<div class="o-front-article__article">
{{> @m-front-article this }}
</div>
{{/each}}
</div>
{{#if single}}
<footer class="o-front-article__cta">
<div class="o-front-article__cta-button">
{{> @a-button cta }}
</div>
<div class="o-front-article__cta-label">
{{ cta-help-text }}
</div>
</footer>
{{/if}}
{{#if mm}}
<footer class="o-front-article__mm">
<div class="o-front-article__meta">
<time class="o-front-article__date" datetime="{{ timestamp }}">{{ date }}</time>
{{#if oton}}<a href="{{ author-url }}" class="o-front-article__author">{{ author }}</a>{{/if}}
</div>
{{#if oton}}
<div class="o-front-article__author-image">
{{> @a-image img}}
</div>
{{/if}}
</footer>
{{/if}}
</article>
.o-front-article {
@extend .grid-item;
&__cat-title {
@include media($_DESKTOP) {
margin-bottom: 8px;
}
}
&__quote {
position: absolute;
@include fluid-grid-item-props(top right);
svg {
fill: $color-primary-super-light;
height: 29px;
width: 40px;
@include high-contrast {
fill: $color-grey-3;
}
@include media($_DESKTOP) {
height: 39px;
width: 56px;
}
}
}
&__articles {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
&--mm &__articles {
@include media($_MOBILE) {
padding: 12px 0;
}
}
&__article {
margin-top: 22px;
width: 100%;
}
&--double &__article {
@include media($_MOBILE) {
&:first-child {
border-bottom: solid 1px $color-grey-2;
padding-bottom: 20px;
}
}
@include media($_DESKTOP) {
width: calc(50% - 16px);
&:first-of-type {
margin-right: 16px;
}
&:last-of-type {
margin-left: 16px;
}
.m-front-article__title {
font-size: 1rem;
}
}
}
&--mm {
position: relative;
background: $color-grey-1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 80%;
@include media($_MOBILE) {
margin-top: 41px;
margin-bottom: 41px;
}
}
&__cta {
margin-top: 16px;
border-top: 1px solid $color-grey-2;
display: flex;
flex-direction: column-reverse;
@include media($_DESKTOP) {
flex-direction: row;
align-items: center;
padding-top: 20px;
}
}
&__cta-label {
margin: 16px 0;
line-height: 1.4em;
@include media($_DESKTOP) {
margin-left: 40px;
}
}
&__mm {
display: flex;
width: 100%;
align-items: flex-end;
justify-content: space-between;
}
&__author-image {
width: 100px;
height: 100px;
transform: rotate(-5deg);
transform-origin: bottom right;
margin-left: 20px;
@include media(480px) {
margin-top: -27px;
}
}
&__meta {
flex-grow: 1;
border-top: solid 1px $color-grey-2;
margin-top: 12px;
font-size: 0.875rem; // 14/16
}
&__date {
display: block;
margin: 12px 0 8px;
@include media($_DESKTOP) {
margin-bottom: 0;
display: inline-block;
}
}
&__author {
@include clean-link;
display: inline-block;
font-weight: bold;
@include media($_DESKTOP) {
margin-left: 28px;
position: relative;
&::before, &:hover::before {
content: "\25A0";
color: $color-secondary;
position: absolute;
left: -19px;
transform: translateY(-0.1em) rotate(-5deg);
font-size: 0.9em;
-webkit-text-size-adjust: 50%;
}
}
}
}
{
"modifiers": [
"single"
],
"cat-title": {
"label": "Kampagne",
"url": "#"
},
"articles": [
{
"article-1": null,
"modifiers": [
"image-first"
],
"url": "#",
"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.",
"has-img": true,
"img": {
"link-url": "#",
"image-src": "/img/equality.jpg",
"alt": "Symbolbild Fair-Food",
"title": "Fair schmeckt besser"
}
}
],
"single": true,
"cta": {
"label": "Aktiv werden",
"modifiers": [
"secondary"
]
},
"cta-help-text": "Ich will mich für Gleichstellung einsetzen"
}
No notes defined.