Styleguide

Category Title: With Link 

<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: 
    .a-cat-title {
	font-size: 1rem;
	line-height: 1.2em;
	margin: 0;

	&__link {
		@include clean-link;

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

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

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

			@include hover {
				color: $color-primary;

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

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

					@include high-contrast {
						background-color: $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: 856 Bytes 
{
  "label": "Medienmitteilungen",
  "url": "#"
}

No notes defined.