Styleguide

List Header 

<div class="m-list-header">
    <h2 class="m-list-header__title-wrapper">
        <span class="m-list-header__counter">82</span>
        <span class="m-list-header__title">Suchresultate zu <span class="m-list-header__term">Atomie</span> in der Kategorie <span class="m-list-header__term">Klima und Energie</span></span>
    </h2>
    <div class="m-list-header__criteria">
        <span class="m-list-header__criteria-desc">Nach Kategorie filtern:</span>
        <ul class="m-list-header__criteria-list">
            <li class="m-list-header__criteria-item">
                <a href="#asdf" class="m-list-header__criteria-link m-list-header__criteria-link--active">Klima und Energie</a>
            </li>
            <li class="m-list-header__criteria-item">
                <a href="#asdf" class="m-list-header__criteria-link">Atom</a>
            </li>
            <li class="m-list-header__criteria-item">
                <a href="#lkjh" class="m-list-header__criteria-link">Energiewende</a>
            </li>
        </ul>
        <div class="m-list-header__reset-filter">
            <button type="button" class="a-button a-button--outline">Alle Resultate Anzeigen</button>
        </div>
    </div>
</div>
 
<div class="m-list-header">
	<h2 class="m-list-header__title-wrapper">
		<span class="m-list-header__counter">{{counter}}</span>
		<span class="m-list-header__title">{{{title}}}</span>
	</h2>
	<div class="m-list-header__criteria">
		<span class="m-list-header__criteria-desc">{{criteria-desc}}</span>
		<ul class="m-list-header__criteria-list">
		{{#each criteria}}
			<li class="m-list-header__criteria-item">
				<a href="{{ this.link }}" class="m-list-header__criteria-link{{#if
					this.active }} m-list-header__criteria-link--active{{/if}}">{{ this.name }}</a>
			</li>
		{{/each}}
		</ul>
		<div class="m-list-header__reset-filter">
			{{> @a-button button}}
		</div>
	</div>
</div>
  • Content: 
    .m-list-header {
	&__title {
		color: $color-text;
	}

	&__term {
		color: $color-primary;

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

	&__criteria {
		line-height: 1.5em;
	}

	&__criteria-desc {
		font-weight: $font-weight-semi;
		margin-right: 0.75em;
	}

	&__criteria-list {
		@include clean-ul;

		display: inline;
	}

	&__criteria-item {
		@include clean-li;

		display: inline;
		line-height: 1.5em;

		&:not(:last-of-type) {
			margin-right: 0.75em;
		}
	}

	&__criteria-link {
		@include clean-link;
		transition: color $transition-ease $transition-fast;

		@include hover {
			color: $color-primary;

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

		&--active {
			font-weight: $font-weight-bold;
			cursor: default;

			@include hover {
				color: $color-text;
			}
		}
	}

	&__reset-filter {
		margin-top: 1em;
	}
}
  • URL: /components/raw/m-list-header/_m-list-header.scss
  • Filesystem Path: styleguide/src/components/molecules/m-list-header/_m-list-header.scss
  • Size: 873 Bytes 
{
  "counter": 82,
  "title": "Suchresultate zu <span class=\"m-list-header__term\">Atomie</span> in der Kategorie <span class=\"m-list-header__term\">Klima und Energie</span>",
  "criteria-desc": "Nach Kategorie filtern:",
  "button": {
    "label": "Alle Resultate Anzeigen",
    "modifiers": [
      "outline"
    ]
  },
  "criteria": [
    {
      "name": "Klima und Energie",
      "link": "#asdf",
      "active": true
    },
    {
      "name": "Atom",
      "link": "#asdf"
    },
    {
      "name": "Energiewende",
      "link": "#lkjh"
    }
  ]
}

No notes defined.