Attribute

Default styling for a component with an icon and some text. It's also possible to add a link or any other copy.

Default

px 

			
				<div class="a-attribute ">
	<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
	<p class="a-attribute__text">this is the text</p>
</div>

With error icon

px 

			
				<div class="a-attribute ">
	<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
	<p class="a-attribute__text">this is the text</p>
</div>

With link

px 

			
				<div class="a-attribute ">
	<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
	<a class="a-attribute__link" href="">this is the text</a>
</div>

With location icon

px 

			
				<div class="a-attribute ">
	<span class="a-attribute__icon a-attribute__icon--before icon-location"></span>
	<p class="a-attribute__text">this is the text</p>
</div>

Documentation

Modifiers

  • a-attribute--error

    Displays the icon in a red color

  • a-attribute--location

    Displays the icon in a yellow color

  • a-attribute--inherited

    Lets the text inherit color and font settings from its parent.

icon

  • a-attribute__icon--before

    Gives some spacing at the right side of the icon, if the icon is rendered on the left side, before the text

  • a-attribute__icon--after

    Gives some spacing at the left side of the icon, if the icon is rendered on th right side, after the text