V23/heading template vars

components/billboard/billboard.config.yml

@@ -1,6 +1,6 @@
 preview: '@preview-unpadded'
 context:
-  title: Example headline with 35 characters
+  heading: Example headline with 35 characters
   desc: A description with a maximum of 100 characters. That usually means only one or two sentences.
   cta: Learn more
   cta_link: '#'

components/billboard/billboard.html

@@ -3,8 +3,8 @@
 # parameters:
 # class         - string
 # image         - path
-# title         - string
-# title_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
+# heading         - string
+# heading_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
 # desc          - string
 # cta           - string
 # cta_link      - url
@@ -16,7 +16,7 @@
   <div class="mzp-c-billboard-content">
     <div class="mzp-c-billboard-content-container">
       <div class="mzp-c-billboard-content-inner">
-        <{{ title_el | default('h2') }} class="mzp-c-billboard-heading">{{ title }}</{{ title_el | default('h2') }}>
+        <{{ heading_el | default('h2') }} class="mzp-c-billboard-heading">{{ heading }}</{{ heading_el | default('h2') }}>
       {%- if desc %}
         <p class="mzp-c-billboard-desc">{{ desc }}</p>
       {% endif -%}

components/branding/zap/zap--all-styles.html

@@ -1,18 +1,18 @@
-{% render '@zap', { title_el: 'h2', zap_number: '1', title: 'An <strong>example</strong> of Zap 1' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '2', title: 'An <strong>example</strong> of Zap 2' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '3', title: 'An <strong>example</strong> of Zap 3' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '4', title: 'An <strong>example</strong> of Zap 4' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '5', title: 'An <strong>example</strong> of Zap 5' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '6', title: 'An <strong>example</strong> of Zap 6' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '7', title: 'An <strong>example</strong> of Zap 7' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '8', title: 'An <strong>example</strong> of Zap 8' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '9', title: 'An <strong>example</strong> of Zap 9' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '10', title: 'An <strong>example</strong> of Zap 10' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '11', title: 'An <strong>example</strong> of Zap 11' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '12', title: 'An <strong>example</strong> of Zap 12' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '13', title: 'An <strong>example</strong> of Zap 13' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '14', title: 'An <strong>example</strong> of Zap 14' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '15', title: 'An <strong>example</strong> of Zap 15' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '16', title: 'An <strong>example</strong> of Zap 16' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '17', title: 'An <strong>example</strong> of Zap 17' } %}
-{% render '@zap', { title_el: 'h2', zap_number: '18', title: 'An <strong>example</strong> of Zap 18' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '1', heading: 'An <strong>example</strong> of Zap 1' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '2', heading: 'An <strong>example</strong> of Zap 2' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '3', heading: 'An <strong>example</strong> of Zap 3' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '4', heading: 'An <strong>example</strong> of Zap 4' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '5', heading: 'An <strong>example</strong> of Zap 5' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '6', heading: 'An <strong>example</strong> of Zap 6' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '7', heading: 'An <strong>example</strong> of Zap 7' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '8', heading: 'An <strong>example</strong> of Zap 8' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '9', heading: 'An <strong>example</strong> of Zap 9' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '10', heading: 'An <strong>example</strong> of Zap 10' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '11', heading: 'An <strong>example</strong> of Zap 11' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '12', heading: 'An <strong>example</strong> of Zap 12' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '13', heading: 'An <strong>example</strong> of Zap 13' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '14', heading: 'An <strong>example</strong> of Zap 14' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '15', heading: 'An <strong>example</strong> of Zap 15' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '16', heading: 'An <strong>example</strong> of Zap 16' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '17', heading: 'An <strong>example</strong> of Zap 17' } %}
+{% render '@zap', { heading_el: 'h2', zap_number: '18', heading: 'An <strong>example</strong> of Zap 18' } %}

components/branding/zap/zap.config.yml

@@ -1,5 +1,5 @@
 context:
-  title_el: h1
+  heading_el: h1
   zap_number: 1
-  title: A headline with an <strong>example</strong> zap.
+  heading: A headline with an <strong>example</strong> zap.
 

components/branding/zap/zap.html

@@ -1,8 +1,8 @@
 {# @zap
 #
 # parameters:
-# title_el      - HTML heading (h1, h2, h3, h4, h5, h6)
+# heading_el      - HTML heading (h1, h2, h3, h4, h5, h6)
 # zap_number    - Zap class suffix (1—18)
-# title         - string
+# heading         - string
 #}
-<{{ title_el | default('h1') }} class="mzp-has-zap-{{ zap_number | default('1') }}">{{ title | safe }}</{{ title_el }}>
+<{{ heading_el | default('h1') }} class="mzp-has-zap-{{ zap_number | default('1') }}">{{ heading | safe }}</{{ heading_el }}>

components/callout/callout.config.yml

@@ -1,7 +1,7 @@
 preview: '@preview-unpadded'
 context:
-  title: A Headline With 30 Characters
-  title_el: h1
+  heading: A Headline With 30 Characters
+  heading_el: h1
   desc: A description of about 150 characters, give or take. Because this text is centered it works best with a tagline or brief intro, just a sentence or two.
   cta: False
   image: False

components/callout/callout.html

@@ -3,9 +3,9 @@
 # parameters:
 # class           - string
 # content_class   - string
-# title           - string
-# title_el        - HTML heading element (h1, h2, h3, h4, h5, h6)
-# title_class     - string
+# heading           - string
+# heading_el        - HTML heading element (h1, h2, h3, h4, h5, h6)
+# heading_class     - string
 # desc            - string
 # cta             - string
 # cta_link        - url
@@ -14,7 +14,7 @@
 <section class="mzp-c-callout{% if class %} {{ class }}{% endif %}">
   <div class="mzp-l-content{% if content_class %} {{ content_class }}{% endif %}">
     <div class="mzp-c-callout-content">
-      <{{ title_el | default('h2') }} class="mzp-c-callout-heading{% if title_class %} {{ title_class }}{% endif %}">{{ title }}</{{ title_el | default('h2') }}>
+      <{{ heading_el | default('h2') }} class="mzp-c-callout-heading{% if heading_class %} {{ heading_class }}{% endif %}">{{ heading }}</{{ heading_el | default('h2') }}>
     {%- if desc %}
       <div class="mzp-c-callout-desc">
         <p>{{ desc }}</p>

components/card/card.config.yml

@@ -5,7 +5,7 @@ context:
   link: https://example.com
   image: '/img/image-3-2.jpg'
   tag: Card tag
-  title: Card title with about 30-40 characters
+  heading: Card heading with about 30-40 characters
   desc: A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.
   cta: Call to action
   meta: Card meta info
@@ -16,7 +16,7 @@ variants:
       link: https://example.com
       image: '/img/image-1-1.jpg'
       tag: Audio
-      title: Card title with about 30-40 characters
+      heading: Card heading with about 30-40 characters
       desc: A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.
       cta: This call to action is 37 characters
       meta: false

components/card/card.html

@@ -5,8 +5,8 @@
 # link          - url
 # image         - path
 # tag           - string
-# title         - string
-# title_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
+# heading         - string
+# heading_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
 # desc          - string
 # cta           - string
 # meta          - string
@@ -18,7 +18,7 @@
     </div>
     <div class="mzp-c-card-content">
       {% if tag %}<div class="mzp-c-card-tag">{{ tag }}</div>{% endif %}
-      {% if title %}<{{ title_el | default('h2') }} class="mzp-c-card-heading">{{ title }}</{{ title_el | default('h2') }}>{% endif %}
+      {% if heading %}<{{ heading_el | default('h2') }} class="mzp-c-card-heading">{{ heading }}</{{ heading_el | default('h2') }}>{% endif %}
       {% if desc %}<p class="mzp-c-card-desc">{{ desc }}</p>{% endif %}
       {% if cta %}<p class="mzp-c-card-cta"><span class="mzp-c-card-cta-text">{{ cta }}</span></p>{% endif %}
       {% if meta %}<p class="mzp-c-card-meta">{{ meta }}</p>{% endif %}

components/card/readme.md

@@ -1,4 +1,4 @@
-A Card is a unit of content featuring an image along with a title and description,
+A Card is a unit of content featuring an image along with a heading and description,
 wrapped in a block-level link.
 
 Cards come in a variety of sizes, activated by adding a modifier class:
@@ -18,14 +18,14 @@ size depends on the card layout:
 - 3-column layout: `600px` wide (low-res), `1200px` wide (high-res)
 - 2-column layout: `930px` wide (low-res), `1860px` wide (high-res)
 
-In addition to the image, title, and description, cards may hold a few other
+In addition to the image, heading, and description, cards may hold a few other
 distinct pieces of content:
-- A tag, sometimes with an icon, above the title.
+- A tag, sometimes with an icon, above the heading.
 - A Call To Action
 - A small meta label
 
-A card must contain at minimum an image and either a title or a description (or
-both). All other content is optional. Try to keep card titles to one or two lines
+A card must contain at minimum an image and either a heading or a description (or
+both). All other content is optional. Try to keep card headings to one or two lines
 (about 50 characters max) and descriptions to two or three lines (about 150
 characters max). Tags should be short, just one or two words. Calls to Action and
 meta labels should fit on one line, about 30-40 characters max.

components/forms/12-form-header/form-header.html

@@ -1,7 +1,7 @@
 <form class="mzp-c-form">
   <div class="mzp-c-form-header">
-    <h2 class="mzp-c-form-heading">Form Title</h2>
-    <p>The title and this introduction are inside a form-header.</p>
+    <h2 class="mzp-c-form-heading">Form Heading</h2>
+    <p>The heading and this introduction are inside a form-header.</p>
   </div>
 
   {% render '@input-field', { type: 'text', label: 'Username', id: 'user', name: 'user' } %}

components/layout/03-card-layout/02-card-layout--third.html

@@ -1,5 +1,5 @@
 <div class="mzp-l-content mzp-l-card-third">
- {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
- {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
- {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
 </div>

components/layout/03-card-layout/03-card-layout--quarter.html

@@ -1,6 +1,6 @@
 <div class="mzp-l-content mzp-l-card-quarter">
- {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
- {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
- {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
- {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+ {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
 </div>

components/layout/03-card-layout/04-card-layout--hero.html

@@ -1,7 +1,7 @@
 <div class="mzp-l-content mzp-l-card-hero">
-  {% render '@card--large', { class: 'mzp-c-card-large mzp-has-aspect-16-9', image: '/img/image-16-9.jpg', link: '#', title: 'A large hero card', desc: 'A brief card description, just a single sentence.' } %}
-  {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
-  {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
-  {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
-  {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--large', { class: 'mzp-c-card-large mzp-has-aspect-16-9', image: '/img/image-16-9.jpg', link: '#', heading: 'A large hero card', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
 </div>

components/layout/03-card-layout/card-layout.html

@@ -1,4 +1,4 @@
 <div class="mzp-l-content mzp-l-card-half">
-  {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
-  {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
+  {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %}
 </div>

components/navigation/02-menu/menu.html

@@ -38,7 +38,7 @@
             </ul>
           </div>
           <div class="mzp-c-menu-panel-card">
-            {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'This is an optional card included in the menu. Only visible on wide viewports.' } %}
+            {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'This is an optional card included in the menu. Only visible on wide viewports.' } %}
           </div>
         </div>
       </div>

components/navigation/03-menu-item/readme.md

@@ -1,6 +1,6 @@
 - Each Menu Item should have a link destination.
 - Adding a class of `mzp-has-icon` will allow for an icon to be displayed next
-  to the title.
+  to the heading.
 - Icons sizes should be `24px` x `24px`.
 - Icons should be an inline `<svg>` or `<img>` with a class of `mzp-c-menu-item-icon`.
 - Icon, description and secondary links are all optional.

components/picto/picto.html

@@ -3,15 +3,15 @@
 # parameters:
 # image         - path
 # image_width   - string
-# title_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
-# title         - string
+# heading_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
+# heading         - string
 # body          - string
 #}
 <section class="mzp-c-picto">
   <div class="mzp-c-picto-image">
     <img src="{{ image | default('/protocol/img/icons/image.svg') | path }}" width="{{ image_width | default('64') }}" alt="">
   </div>
-  <{{ title_el | default('h3') }} class="mzp-c-picto-heading">{{ title }}</{{ title_el | default('h3') }}>
+  <{{ heading_el | default('h3') }} class="mzp-c-picto-heading">{{ heading }}</{{ heading_el | default('h3') }}>
   {%- if body %}
   <div class="mzp-c-picto-body">
     <p>{{ body }}</p>

components/section-heading/section-heading.config.yml

@@ -1,2 +1,2 @@
 context:
-  title: Sphinx of black quartz, judge my vow!
+  heading: Sphinx of black quartz, judge my vow!

components/section-heading/section-heading.html

@@ -2,6 +2,6 @@
 #
 # parameters:
 # class         - string
-# title         - string
+# heading         - string
 #}
-<h2 class="mzp-c-section-heading{% if class %} {{ class }}{% endif %}">{{ title | safe }}</h2>
+<h2 class="mzp-c-section-heading{% if class %} {{ class }}{% endif %}">{{ heading | safe }}</h2>

components/sticky-promo/readme.md

@@ -43,7 +43,7 @@ MzpStickyPromo.open();
 - Make initialize the component *after* the DOM has loaded.
 - The Sticky Promo is positioned in the lower right corner in LTR languages
   and in the lower left corner in RTL languages.
-- Add one of these product theme classes to include a logo above the title:
+- Add one of these product theme classes to include a logo above the heading:
   - `mzp-t-product-firefox`
   - `mzp-t-product-beta`
   - `mzp-t-product-developer`

components/sticky-promo/sticky-promo.config.yml

@@ -1,5 +1,5 @@
 context:
-  title: A headline with 30 characters
+  heading: A headline with 30 characters
   content: |
     <p>Some body content, but keep it short. Just a sentence or two. Maybe three at the most.</p>
 variants:
@@ -9,5 +9,5 @@ variants:
       also features a product logo and button.
     context:
       class: 'mzp-t-dark mzp-t-product-developer'
-      title: Get the browser made for developers
+      heading: Get the browser made for developers
       content: <p><a href="#" class="mzp-c-button mzp-t-product mzp-t-lg">Download Now</a></p>

components/sticky-promo/sticky-promo.html

@@ -1,12 +1,12 @@
 {# @sticky-promo
 #
 # parameters:
-# title         - string
+# heading         - string
 # content       - string
 #}
 <aside class="mzp-c-sticky-promo {{ class }}">
   <button class="mzp-c-sticky-promo-close" type="button">Close</button>
-  {% if title %}<h3 class="mzp-c-sticky-promo-heading">{{ title }}</h3>{% endif %}
+  {% if heading %}<h3 class="mzp-c-sticky-promo-heading">{{ heading }}</h3>{% endif %}
   {% if content %}{{ content | safe }}{% endif %}
 </aside>