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
  • JSON
  1. Code Patterns

Headings

```

HTML

{% if module.heading || module.description %}
<div class="sr-spacer-bottom-50">
	{% if module.heading %}
	<h{{module.heading_size}} class="{% if module.heading_display_size != 'auto' %}{{ module.heading_display_size }}{% endif %} heading {% if module.text_color != 'auto' %}text-{{ module.text_color }}{% endif %}">{{ module.heading}}</h{{module.heading_size}}>
	{% endif %}

	{% if module.description %}
	<div class="description">{{ module.description}}</div>
	{% endif %}
</div>
{% endif %}

JSON

{
    "id": "heading",
    "default": "Built for Everyone",
    "label": "Heading",
    "name": "heading",
    "type": "text"
},
{
    "choices": [
        [
            "1",
            "H1"
        ],
        [
            "2",
            "H2"
        ],
        [
            "3",
            "H3"
        ],
        [
            "4",
            "H4"
        ],
        [
            "5",
            "H5"
        ],
        [
            "6",
            "H6"
        ]
    ],
    "default": "2",
    "display": "select",
    "label": "Heading Size",
    "name": "heading_size",
    "visibility": {
        "controlling_field": "heading",
        "controlling_value_regex": null,
        "operator": null,
        "access": null
    },
    "type": "choice",
    "required": true
},
			{
    "name": "heading_display_size",
    "label": "Heading Display Size",
    "required": true,
    "locked": false,
				"display": "select",
				"visibility": {
        "controlling_field": "heading",
        "controlling_value_regex": null,
        "operator": null,
        "access": null
    },
    "choices": [
        [
            "auto",
            "Auto"
        ],
        [
            "h1",
            "H1"
        ],
        [
            "h2",
            "H2"
        ],
        [
            "h3",
            "H3"
        ],
        [
            "h4",
            "H4"
        ],
        [
            "h5",
            "H5"
        ],
        [
            "h6",
            "H6"
        ],
        [
            "display-4",
            "L"
        ],
        [
            "display-3",
            "XL"
        ],
        [
            "display-2",
            "XXL"
        ],
        [
            "display-1",
            "XXXL"
        ]
    ],
    "type": "choice",
    "default": "auto"
},
{
    "default": "",
    "label": "Description",
    "name": "description",
    "type": "richtext"
}
PreviousDesign SettingsNextResponsive Images

Last updated 4 years ago