LINK-BUTTON (Bedienelemente )

src/app/shared/components/link-button/templates

Demo Section

Each variation will be presented in the following section.

Default

Zur Seite xy

RTE (Detailseite)

Zur Seite xy

Readme

linkButton (component)

Description

Standard Link Button

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/link-button

Fields

Settings

Parameter Type Default Description
settings.linkButtonClasses String '' Modifier classes for component
settings.linkButtonContextClass String 'default' Context class of component for a standard Link Button

Content

Parameter Type Description
content.linkHref String Url or Path
content.linkContent String Text zum Link

SASS

Variables

There are multiple variables which you can change:

Variable Value Description

Modifier Classes

There are modifier classes you can add to c-link-button:

Modifier Description

Templates

link-button.hbs

<div class="c-link-button{{#if settings.linkButtonContextClass}}--{{settings.linkButtonContextClass}}{{else}}--default{{/if}}{{#if settings.linkButtonClasses}} {{settings.linkButtonClasses}}{{/if}}"
     data-css="c-link-button">
		<a class="link-button__link" href="{{content.linkHref}}" {{#if settings.linkTarget}}target="{{settings.linkTarget}}"{{/if}}{{#if content.linkTitle}} title="{{content.linkTitle}}"{{/if}} {{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}"{{/each}}>{{content.linkContent}}</a>
</div>

Data File

link-button.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"linkButtonContextClass": "default",
				"linkButtonClasses": "",
				"linkTarget": "_blank"
			},
			"content": {
				"linkHref": "#",
				"linkContent": "Zur Seite xy",
				"linkTitle": ""
			}
		},
		"rte": {
			"docs": {
				"variationName": "RTE (Detailseite)"
			},
			"settings": {
				"linkButtonContextClass": "rte",
				"linkButtonClasses": "",
				"linkTarget": "_blank"
			},
			"content": {
				"linkHref": "#",
				"linkContent": "Zur Seite xy",
				"linkTitle": ""
			}
		}
	}
}

Styles

link-button.scss

/* ===================================================
component: link-button
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-link-button"] {
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $color-green;
	border: 1px solid $color-green;
	transition: background-color $animation-duration-std $animation-easing-std;

	@include print() {
		display: none;
	}

	&:hover {
		background-color: $color-white;

		.link-button__link {
			color: $color-green;

			&::before {
				@include sprites-icon-arrow-green100();
				transform: translateX(5px);
			}

			&.is-external {
				/* Belegung nötig da sonst rte a-class Einstellungen überschreiben */
				color: $color-green;

				&::before {
					@include sprites-icon-externalarrow-green100();
					transform: translateX(5px);
				}
			}
		}
	}

	.link-button__link {
		padding: 10px 30px 10px 50px;
		color: $color-white;
		text-decoration: none;
		font-size: 1.5rem;
		line-height: (24/15);
		letter-spacing: .028rem;
		font-family: $font-bold;
		transition: color $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-p) {
			padding: 20px 30px 20px 50px;
			font-size: 1.6rem;
			letter-spacing: .03rem;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-white();
			left: 20px;
			top: calc(50% - 7px);
			transition: transform $animation-duration-std $animation-easing-std;
		}

		&.is-external {
			/* Belegung nötig da sonst rte a-class Einstellungen überschreiben */
			color: $color-white;

			&::before {
				@include pseudo();
				@include sprites-icon-externalarrow-white();
				left: 20px;
				top: calc(50% - 7px);
				transition: transform $animation-duration-std $animation-easing-std;
				margin: 0;
			}
		}

		&.a11y-focus-key {
			outline-offset: -2px;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-link-button--default {
}

.c-link-button--rte {

	margin-bottom: 60px;


	@include bp($bp-tablet-p) {
		@include grid-push-h(0);
	}

	@include bp($bp-tablet-l) {
		@include grid-push-h(1);
	}

	@include bp($bp-desktop-l) {
		@include grid-push-h(2);
	}
}

HTML Output

Default

<div class="c-link-button--default" data-css="c-link-button">
	<a class="link-button__link" href="#" target="_blank">Zur Seite xy</a>
</div>

RTE (Detailseite)

<div class="c-link-button--rte" data-css="c-link-button">
	<a class="link-button__link" href="#" target="_blank">Zur Seite xy</a>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link