Text

A component used to display text in a certain format. This component can vary between font-sizes and colors.

Default

px 

			
				<p class="a-text ">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
	posuere, velit in auctor porta, arcu massa placerat massa, ut
	dignissim orci velit id tortor. Morbi eros ligula, vehicula quis
	eros quis, convallis eleifend lacus. Vivamus feugiat mollis nunc ut
	tristique. Duis porttitor mollis ex, non porttitor eros varius vel.
	Pellentesque quis nunc euismod, dictum ipsum sit amet, venenatis
	enim. Praesent suscipit imperdiet mi sit amet lobortis. Integer
	consequat finibus imperdiet. Vivamus rhoncus quis ex nec
	ullamcorper. Nulla auctor, dui et varius sagittis, libero sem
	tincidunt orci, vel varius metus massa eget felis. Aenean vitae
	suscipit quam, in vehicula nulla. Donec dictum ac lorem lobortis
	scelerisque. Sed sit amet leo ultricies, ornare eros non, lacinia
	neque. Nulla aliquet et ipsum a fringilla.
</p>

Eyebrow

px 

			
				<p class="a-text a-text--eyebrow">
	Lorem ipsum dolor sit amet
</p>

Label

px 

			
				<p class="a-text a-text--label">
	Lorem ipsum dolor sit amet.
</p>
<p class="a-text a-text--light a-text--label">
	Lorem ipsum dolor sit amet.
</p>

Large

px 

			
				<p class="a-text a-text--large">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
	posuere, velit in auctor porta, arcu massa placerat massa, ut
	dignissim orci velit id tortor. Morbi eros ligula, vehicula quis
	eros quis, convallis eleifend lacus. Vivamus feugiat mollis nunc ut
	tristique. Duis porttitor mollis ex, non porttitor eros varius vel.
	Pellentesque quis nunc euismod, dictum ipsum sit amet, venenatis
	enim. Praesent suscipit imperdiet mi sit amet lobortis. Integer
	consequat finibus imperdiet. Vivamus rhoncus quis ex nec
	ullamcorper. Nulla auctor, dui et varius sagittis, libero sem
	tincidunt orci, vel varius metus massa eget felis. Aenean vitae
	suscipit quam, in vehicula nulla. Donec dictum ac lorem lobortis
	scelerisque. Sed sit amet leo ultricies, ornare eros non, lacinia
	neque. Nulla aliquet et ipsum a fringilla.
</p>
<p class="a-text a-text--light a-text--large">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
	posuere, velit in auctor porta, arcu massa placerat massa, ut
	dignissim orci velit id tortor. Morbi eros ligula, vehicula quis
	eros quis, convallis eleifend lacus. Vivamus feugiat mollis nunc ut
	tristique. Duis porttitor mollis ex, non porttitor eros varius vel.
	Pellentesque quis nunc euismod, dictum ipsum sit amet, venenatis
	enim. Praesent suscipit imperdiet mi sit amet lobortis. Integer
	consequat finibus imperdiet. Vivamus rhoncus quis ex nec
	ullamcorper. Nulla auctor, dui et varius sagittis, libero sem
	tincidunt orci, vel varius metus massa eget felis. Aenean vitae
	suscipit quam, in vehicula nulla. Donec dictum ac lorem lobortis
	scelerisque. Sed sit amet leo ultricies, ornare eros non, lacinia
	neque. Nulla aliquet et ipsum a fringilla.
</p>

Light

px 

			
				<p class="a-text a-text--light">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
	posuere, velit in auctor porta, arcu massa placerat massa, ut
	dignissim orci velit id tortor. Morbi eros ligula, vehicula quis
	eros quis, convallis eleifend lacus. Vivamus feugiat mollis nunc ut
	tristique. Duis porttitor mollis ex, non porttitor eros varius vel.
	Pellentesque quis nunc euismod, dictum ipsum sit amet, venenatis
	enim. Praesent suscipit imperdiet mi sit amet lobortis. Integer
	consequat finibus imperdiet. Vivamus rhoncus quis ex nec
	ullamcorper. Nulla auctor, dui et varius sagittis, libero sem
	tincidunt orci, vel varius metus massa eget felis. Aenean vitae
	suscipit quam, in vehicula nulla. Donec dictum ac lorem lobortis
	scelerisque. Sed sit amet leo ultricies, ornare eros non, lacinia
	neque. Nulla aliquet et ipsum a fringilla.
</p>

Small

px 

			
				<p class="a-text a-text--small">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
	posuere, velit in auctor porta, arcu massa placerat massa, ut
	dignissim orci velit id tortor. Morbi eros ligula, vehicula quis
	eros quis, convallis eleifend lacus. Vivamus feugiat mollis nunc ut
	tristique. Duis porttitor mollis ex, non porttitor eros varius vel.
	Pellentesque quis nunc euismod, dictum ipsum sit amet, venenatis
	enim. Praesent suscipit imperdiet mi sit amet lobortis. Integer
	consequat finibus imperdiet. Vivamus rhoncus quis ex nec
	ullamcorper. Nulla auctor, dui et varius sagittis, libero sem
	tincidunt orci, vel varius metus massa eget felis. Aenean vitae
	suscipit quam, in vehicula nulla. Donec dictum ac lorem lobortis
	scelerisque. Sed sit amet leo ultricies, ornare eros non, lacinia
	neque. Nulla aliquet et ipsum a fringilla.
</p>
<p class="a-text a-text--light a-text--small">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
	posuere, velit in auctor porta, arcu massa placerat massa, ut
	dignissim orci velit id tortor. Morbi eros ligula, vehicula quis
	eros quis, convallis eleifend lacus. Vivamus feugiat mollis nunc ut
	tristique. Duis porttitor mollis ex, non porttitor eros varius vel.
	Pellentesque quis nunc euismod, dictum ipsum sit amet, venenatis
	enim. Praesent suscipit imperdiet mi sit amet lobortis. Integer
	consequat finibus imperdiet. Vivamus rhoncus quis ex nec
	ullamcorper. Nulla auctor, dui et varius sagittis, libero sem
	tincidunt orci, vel varius metus massa eget felis. Aenean vitae
	suscipit quam, in vehicula nulla. Donec dictum ac lorem lobortis
	scelerisque. Sed sit amet leo ultricies, ornare eros non, lacinia
	neque. Nulla aliquet et ipsum a fringilla.
</p>

Documentation

Modifiers

  • a-text--light

    Create a paragraph that is colored in a lighter theme compared to the default.

  • a-text--dark

    Create a paragraph that is colored in a darker theme compared to the default.

  • a-text--large

    Create a paragraph that is larger in font-size and line-height compared to the default.

  • a-text--small

    Create a paragraph that is smaller in font-size and line-height compared to the default.

  • a-text--label

    Create a paragraph that is smaller in font-size and line-height compared to the default and represents a small block of text or a label.

  • a-text--eyebrow

    Create a paragraph that is smaller in font-size, line-height and uppercase compared to the default and represents a small block of text above a title.