Styleguide

Category Title 

<h2 class="a-cat-title">
    <a class="a-cat-title__link" href="#">Medienmitteilungen</a>
</h2>
 
<h2 class="a-cat-title">
	{{# if url }}
		<a class="a-cat-title__link" href="{{ url }}">{{ label }}</a>
	{{else}}
		<span class="a-cat-title__link a-cat-title__link--no-link">{{ label }}</span>
	{{/if}}
</h2>
  • Content: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-cat-title {
	font-size: 1rem;
	line-height: 1.2em;
	margin: 0;

	&__link {
		@include m.clean-link;

		& {
			font-family: v.$font-primary;
			font-weight: v.$font-weight-semi;
			letter-spacing: 0.125em;
			line-height: 1.25em;
			color: v.$color-text;
			transition: color v.$transition-fast v.$transition-ease;
			display: inline-block;
		}

		&::after {
			content: ' ';
			width: 1.4em;
			height: 2px;
			background-color: v.$color-text-light;
			transition: all v.$transition-fast v.$transition-ease;
			display: block;
			margin-top: 0.7em;
		}

		&:not(&--no-link) {
			cursor: pointer;

			@include m.hover {
				color: v.$color-primary;

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

				&:after {
					width: 100%;
					background-color: v.$color-primary;

					@include m.high-contrast {
						background-color: v.$color-primary-dark;
					}
				}
			}
		}
	}
}
  • URL: /components/raw/a-cat-title/_a-cat-title.scss
  • Filesystem Path: styleguide/src/components/atoms/a-cat-title/_a-cat-title.scss
  • Size: 995 Bytes 
{
  "label": "Medienmitteilungen",
  "url": "#"
}

No notes defined.