LPA - Shield

A button styled, static label with clickable icon button.

When using a modifier, make sure to also pass the correct modifier to the icon button.

Modifiers

Highlight

Aanslag


			
				<div class="c-tag-interactive c-tag-interactive--highlight ">
	<div class="c-tag-interactive__content">
		<div class="c-icon c-tag-interactive__icon">
			<?xml version="1.0" encoding="utf-8"?>
			<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
				<path d="M23.2,10.6l-9.8-9.8c-0.4-0.4-1.1-0.7-1.6-0.7H2.3c-1.3,0-2.2,1-2.2,2.2v9.5c0,0.5,0.3,1.2,0.7,1.6l9.8,9.8
	c0.9,0.9,2.3,0.9,3.2,0l9.5-9.5C24.1,12.9,24.1,11.5,23.2,10.6z M12.2,21.7l-9.8-9.8V2.3h9.5l9.9,9.9L12.2,21.7z M9,6.8
	c0-1.2-1-2.2-2.2-2.2c-1.3,0-2.2,1-2.2,2.2C4.6,8,5.5,9,6.8,9C8,9,9,8,9,6.8z" />
			</svg>
		</div>
		<span class="c-tag-interactive__text">Aanslag</span>
	</div>
	<div class="c-tag-interactive__button-container">
		<button class="c-button c-button--highlight c-tag-interactive__button">
			<div class="c-icon c-button__icon">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
				</svg>
			</div>
		</button>
	</div>
</div>

Primary

Aanslag


			
				<div class="c-tag-interactive  ">
	<div class="c-tag-interactive__content">
		<div class="c-icon c-tag-interactive__icon">
			<?xml version="1.0" encoding="utf-8"?>
			<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
				<path d="M23.2,10.6l-9.8-9.8c-0.4-0.4-1.1-0.7-1.6-0.7H2.3c-1.3,0-2.2,1-2.2,2.2v9.5c0,0.5,0.3,1.2,0.7,1.6l9.8,9.8
	c0.9,0.9,2.3,0.9,3.2,0l9.5-9.5C24.1,12.9,24.1,11.5,23.2,10.6z M12.2,21.7l-9.8-9.8V2.3h9.5l9.9,9.9L12.2,21.7z M9,6.8
	c0-1.2-1-2.2-2.2-2.2c-1.3,0-2.2,1-2.2,2.2C4.6,8,5.5,9,6.8,9C8,9,9,8,9,6.8z" />
			</svg>
		</div>
		<span class="c-tag-interactive__text">Aanslag</span>
	</div>
	<div class="c-tag-interactive__button-container">
		<button class="c-button  c-tag-interactive__button">
			<div class="c-icon c-button__icon">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
				</svg>
			</div>
		</button>
	</div>
</div>

Secondary

Aanslag


			
				<div class="c-tag-interactive c-tag-interactive--dark ">
	<div class="c-tag-interactive__content">
		<div class="c-icon c-tag-interactive__icon">
			<?xml version="1.0" encoding="utf-8"?>
			<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
				<path d="M23.2,10.6l-9.8-9.8c-0.4-0.4-1.1-0.7-1.6-0.7H2.3c-1.3,0-2.2,1-2.2,2.2v9.5c0,0.5,0.3,1.2,0.7,1.6l9.8,9.8
	c0.9,0.9,2.3,0.9,3.2,0l9.5-9.5C24.1,12.9,24.1,11.5,23.2,10.6z M12.2,21.7l-9.8-9.8V2.3h9.5l9.9,9.9L12.2,21.7z M9,6.8
	c0-1.2-1-2.2-2.2-2.2c-1.3,0-2.2,1-2.2,2.2C4.6,8,5.5,9,6.8,9C8,9,9,8,9,6.8z" />
			</svg>
		</div>
		<span class="c-tag-interactive__text">Aanslag</span>
	</div>
	<div class="c-tag-interactive__button-container">
		<button class="c-button c-button--dark c-tag-interactive__button">
			<div class="c-icon c-button__icon">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
				</svg>
			</div>
		</button>
	</div>
</div>

Tertiary

Aanslag


			
				<div class="c-tag-interactive c-tag-interactive--border ">
	<div class="c-tag-interactive__content">
		<div class="c-icon c-tag-interactive__icon">
			<?xml version="1.0" encoding="utf-8"?>
			<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
				<path d="M23.2,10.6l-9.8-9.8c-0.4-0.4-1.1-0.7-1.6-0.7H2.3c-1.3,0-2.2,1-2.2,2.2v9.5c0,0.5,0.3,1.2,0.7,1.6l9.8,9.8
	c0.9,0.9,2.3,0.9,3.2,0l9.5-9.5C24.1,12.9,24.1,11.5,23.2,10.6z M12.2,21.7l-9.8-9.8V2.3h9.5l9.9,9.9L12.2,21.7z M9,6.8
	c0-1.2-1-2.2-2.2-2.2c-1.3,0-2.2,1-2.2,2.2C4.6,8,5.5,9,6.8,9C8,9,9,8,9,6.8z" />
			</svg>
		</div>
		<span class="c-tag-interactive__text">Aanslag</span>
	</div>
	<div class="c-tag-interactive__button-container">
		<button class="c-button c-button--border c-tag-interactive__button">
			<div class="c-icon c-button__icon">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
				</svg>
			</div>
		</button>
	</div>
</div>

Documentation

Modifiers

c-tag-interactive--dark

This modifier use darker blue variants. Make sure to also pass the c-button--dark modifier to the button, to enable the correct button styling and behaviour.
c-tag-interactive--border

This modifier will add a border and remove the background color. Make sure to also pass the c-button--border modifier to the button, to enable the correct button styling and behaviour.
c-tag-interactive--highlight

This modifier will change the background color to orange. Make sure to also pass the c-button--highlight modifier to the button, to enable the correct button styling and behaviour.
c-tag-interactive--border-white

This modifier will add a white border and remove the background color. Make sure to also pass the c-button--border-white modifier to the button, to enable the correct button styling and behaviour.