# Typography

## HTML

```markup
{% if module.text_align != 'auto' %} text-{{ module.text_align }}{% endif %} 

{% if module.text_color != 'auto' %}text-{{ module.text_color }}{% endif %}
```

## CSS

{% hint style="info" %}
These options are making use of utility classes built inside Bootstrap 4:

* text alignment: <http://getbootstrap.com/docs/4.1/utilities/text/>
* text color: <http://getbootstrap.com/docs/4.1/utilities/colors/>
  {% endhint %}

## JSON

```
{
	"choices": [
		[
			"auto", "Auto"
		],
		[
			"left", "Left"
		],
		[
			"center", "Center"
		],
		[
			"right", "Right"
		]
	],
	"default": "auto",
	"display": "select",
	"label": "Text Align",
	"name": "text_align",
	"type": "choice",
	"required": true
},
{
	"choices": [
		[
			"auto", "Auto"
		],
		[
			"white", "White"
		],
		[
			"light", "Light"
		],
		[
			"dark", "Dark"
		],
		[
			"primary", "Primary"
		],
		[
			"secondary", "Secondary"
		],
		[
			"info", "Info"
		],
		[
			"warning", "Warning"
		],
		[
			"danger", "Danger"
		]
	],
	"default": "auto",
	"display": "select",
	"label": "Text Color",
	"name": "text_color",
	"type": "choice",
	"required": true
}
```
