@citizensadvice/text-align

Defines the horizontal alignment of text.

Usage no npm install needed!

<script type="module">
  import citizensadviceTextAlign from 'https://cdn.skypack.dev/@citizensadvice/text-align';
</script>

README

Text-align npm (scoped)

Defines the horizontal alignment of text.

Classes

Class names Value
.text-left Align content left
.text-right Align content right
.text-center Align content center
.text-justify Jutify content

Responsive text-align classes

To apply specific classes at set screen widths, use the following classes:

Abbr Value
ns $breakpoint-ns (min-width: 48rem)
m $breakpoint-m (min-width: 48rem, max-width: 64rem)
l $breakpoint-l (min-width: 64rem)

Examples

<div class="text-left text-center-l">Lorem ipsum</div>

// This will align content to the left on devices with a width up until 64rem where upon it will be
centered.

Installation

$ npm install @citizensadvice/text-align

now import into your stylesheet...

@import '@citizensadvice/text-align/index.scss';

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/text-align@latest/build/text-align.css" />