Sprocket Rocket
  • Sprocket Rocket Design System
  • Initial Setup
    • Setup HubL Local Server
    • Setup SR App Locally
    • Clone LaunchPad Starter
  • Create a New Module
    • Design
    • Code
    • Implementation
    • Create a Pull Request
    • Fields JSON
  • Code Patterns
    • Design Settings
    • Headings
    • Responsive Images
    • Implementing Forms
    • Typography
    • CTA/Button
    • Spacers
  • PR Review
    • Design / Code Review
    • Implementation Review
  • Handoff Relay Checklist
    • Client Request - Handoff
    • Page/Template Design - Handoff
    • Module Design - Handoff
    • Page/Template Development - Handoff
    • Module Development - Handoff
    • Review & Delivery - Handoff
  • Guides and Tutorials
    • Code Snippets
    • Lazy Loading
    • How to setup the blog subscription notification emails
    • 404 Error Tracking Event with Google Analytics and Google Tag Manager
    • How to setup a form to be used with SR Conversational Form 01
    • Upgrading Bootstrap to Latest Version
  • HS Page Launch (QC)
  • SR Agency Website Review Checklist (QC)
Powered by GitBook
On this page
  • HTML
  • CSS
  • JSON
  1. Code Patterns

Typography

PreviousImplementing FormsNextCTA/Button

Last updated 4 years ago

HTML

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

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

CSS

These options are making use of utility classes built inside Bootstrap 4:

  • text alignment:

  • text color:

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
}
http://getbootstrap.com/docs/4.1/utilities/text/
http://getbootstrap.com/docs/4.1/utilities/colors/