Styleguide

Vote: 2 Proposals 

<article class="o-vote ">
    <div class="o-vote__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Abstimmungsempfehlungen</span>
        </h2>
    </div>
    <div class="o-vote__proposals">
        <a href="#" class="o-vote__proposal">
            <div class="m-vote m-vote--excerpt">
                <div class="m-vote__tag">
                    <div aria-label="" class="a-vote-tag a-vote-tag--yes">ja</div>
                </div>
                <h3 class="m-vote__title">Fair-Food JA: Gesund und umweltfreundlich</h3>
                <p class="m-vote__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                <div class="m-vote__link-button">
                    <div class="a-link-button ">
                        Mehr über die Vorlage
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="o-vote__proposal">
            <div class="m-vote m-vote--excerpt">
                <div class="m-vote__tag">
                    <div aria-label="" class="a-vote-tag a-vote-tag--yes">ja</div>
                </div>
                <h3 class="m-vote__title">Ernährungssouverenität, die Ergänzung zur Fair-Food-Initiative</h3>
                <p class="m-vote__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                <div class="m-vote__link-button">
                    <div class="a-link-button ">
                        Mehr über die Vorlage
                    </div>
                </div>
            </div>
        </a>
    </div>
    <footer class="o-vote__more">
        <div class="o-vote__link-button">
            <div class="a-link-button ">
                Kantonale Abstimmungen
            </div>
        </div>
    </footer>
</article>
 
<article class="o-vote {{ modifiers_classes }}">
	<div class="o-vote__cat-title">
		{{> @a-cat-title cat-title}}
	</div>
	<div class="o-vote__proposals">
		{{#each proposals}}
			<a href="{{ this.url }}" class="o-vote__proposal">
				{{> @m-vote this }}
			</a>
		{{/each}}
	</div>
	<footer class="o-vote__more">
		<div class="o-vote__link-button">
			{{> @a-link-button link-button }}
		</div>
	</footer>
</article>
  • Content: 
    .o-vote {
	@extend .grid-item;
	height: 100%;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	flex-direction: column;

	&__cat-title {
		margin-bottom: 22px;
		@include fluid-grid-item-props(margin-left);
	}

	&__proposals {
		display: flex;
		flex-direction: column;
		flex-grow: 0.5;
		flex-shrink: 0;
	}

	&__proposal {
		@include clean-link;
		flex-grow: 1;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		align-content: center;
		transition: background $transition-fast $transition-ease;
		position: relative;
		@include fluid-grid-item-props(padding-left padding-right);

		&:after {
			content: ' ';
			width: calc(100% - 82px);
			height: 1px;
			background: $color-grey-2;
			position: absolute;
			bottom: 1px;
			@include fluid-grid-item-props(left);

			@include media($_DESKTOP) {
				width: calc(100% - 2 * (41px + 19 * (100vw - 1024px) / 416));
			}

			@include media(1470px) {
				width: calc(100% - #{2*$grid-item-padding-max});
			}
		}

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

	&__more {
		padding-top: 16px;
		@include fluid-grid-item-props(padding-left padding-right);
	}
}
  • URL: /components/raw/o-vote/_o-vote.scss
  • Filesystem Path: styleguide/src/components/organisms/o-vote/_o-vote.scss
  • Size: 1.1 KB 
{
  "cat-title": {
    "label": "Abstimmungsempfehlungen"
  },
  "proposals": [
    {
      "label": "Fair-Food JA: Gesund und umweltfreundlich",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    },
    {
      "label": "Ernährungssouverenität, die Ergänzung zur Fair-Food-Initiative",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    }
  ],
  "link-button": {
    "label": "Kantonale Abstimmungen"
  }
}

No notes defined.