arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

Components

Use the following component library to build websites in any content management system.

 

Tooltips

The tooltip component has 4 configurations: top, left, bottom, right. The default is top as illustrated by the code snippet below.

<div data-pestle-module="Tooltip">
  <script type="text/json" data-pestle-options>
    {
      "tooltipContent": "Hello world!"
    }
  </script>
</div>

Top

Right

Bottom

Left


Tooltip Modal

This tooltip opens a modal

 

Sharing

This is Mortar's sharing component.

The sharing component comes in both horizontal and vertical display variations.

<div data-pestle-module="Sharing"></div>
<div data-pestle-module="Sharing">
  <script type="text/json" data-pestle-options>
  {
    "display": "vertical"
  }
  </script>
</div>

The sharing component does not handle the display of the preview, it simply passes the current URL to the corresponding social network.

Property Description Status
og:type Must take the value of "article" or "blog". Required
og:title The article title. This title may be truncated, depending on length. All formatting and HTML tags will be removed. Required
og:description The article description or summary. This may be truncated, depending on length. All formatting, line breaks and HTML tags will be removed. Required
og:site_name The site name (e.g., "the Guardian"). Using this field is strongly suggested. Optional
og:url The canonical URL for the page. For example, "http://www.theguardian.com/travel/2013/sep/17/top-10-national-parks-california" (You can also specify canonical with standard HTML markup: ) Optional
article:published_time The date the article was first published. The time should be in ISO 8601 date format. Optional
 

Slider

Mortar's slider component is made for hero promos, inline media galleries, and more.

The slider is built with Pestle, wrapping the react slick package. The slider will take different slide types, at the moment it only takes images in the following format:

<div data-pestle-module="Slider">
  <script type="text/json" data-pestle-options>
    {
      "slides": [
        {
          "type": "image",
          "src": "http://www.fillmurray.com/g/600/400"
        }
      ]
    }
  </script>
</div>

At the moment, the only option for the slider is infinite. The default is infinite which can be set to false. Following is an example of each:

Infinite Slider

<div data-pestle-module="Slider">
  <script type="text/json" data-pestle-options>
    {
      "slides": [...]
    }
  </script>
</div>

Non-Infinite Slider


  <div data-pestle-module="Slider">
    <script type="text/json" data-pestle-options>
      {
        "infinite": false,
        "slides": [...]
      }
    </script>
  </div>
 

Image Aspect Ratios

Whenever possible, National Geographic photos should be displayed with their original crops. When the layout forces a crop, such as in a promo, there are several desired aspect ratios to adhere to.

 

Use a 16:9 aspect ratio for video thumbnails

 

Use a 3:2 aspect ratio for most photos

 

Use a 4:3 aspect ratio for some videos and photos

 

Use a 1:1 aspect ratio for some photos

 

Use a circle for profile images and headshots

<div class="mt2_intratio--broadcast"></div>
<div class="mt2_intratio--photo"></div>
<div class="mt2_intratio--tv"></div>
<div class="mt2_intratio--square"></div>
<div class="mt2_intratio--circle"></div>
 

Photo Captions and Credits

It is standard practice to include photo credits for any image used on National Geographic's website. Credits are not necessary when an image acts as a promo link to a page that includes that image with its credit.

 

Photo Title This is a photo caption. This is a photo caption. This is a photo caption. This is a photo caption. This is a photo caption. This is a photo caption. This is a photo caption.

Photograph by Name Here
Source: goes here
<figcaption>
  <p class="mt2_color--neutral--xd mt2_row-gut-half">
    <span class="mt2_h5">Photo Title</span>
    <span class="mt2_subh4">This is a photo caption.</span>
  </p>

  <span class="mt2_subh3 mt2_color--neutral--l">
    Photograph by Name Here<br />
    Source: goes here
  </span>
</figcaption>
 

Related Content List

This promo component is typically used to link to other pieces of content from an article page. The component will fill the width of its parent container, and thus should be placed inside a container div with a fairly narrow width.

<div class="mt2_relatedcontent mt2_bordercolor--neutral--xl">
  <div class="mt2_bgcolor--neutral--xxl mt2_subh2 mt2_relatedcontent-heading">
    Related Stories
  </div>
  <ul class="mt2_col-gut-lg">
    <li class="mt2_h5 mt2_relatedcontent-item"><a href="" class="mt2_relatedcontent-link">This Is an Article Headline, Around 60 Characters Long</a></li>
    <li class="mt2_h5 mt2_relatedcontent-item"><a href="" class="mt2_relatedcontent-link">This Is an Article Headline, Around 60 Characters Long</a></li>
    <li class="mt2_h5 mt2_relatedcontent-item"><a href="" class="mt2_relatedcontent-link">This Is an Article Headline, Around 60 Characters Long</a></li>
  </ul>
</div>
 

Icon

Icon component, typically used within a CTA Button, but may be used alone as well.

<div data-pestle-module="Icon">
  <script type="text/json" data-pestle-options>
    {
      "name": "#camera",
      "align": "left",
      "size": "large",
      "color": "neutral--xxd",
      "alt": "Camera Icon"
    }
  </script>
</div>
 

Button

Button with optional icon and many display options. To disable icon, simply do not enter an icon name or delete the object from Pestle options.

To create the most basic button, all you need is these 6 properties. Use the 'align' property in the icon object to position the icon around the label. All styles from the UI Patterns are available, as well as icon names from Icons.


  <div data-pestle-module="CTAButton">
    <script type="text/json" data-pestle-options>
    {
      "icon": {
        "name": "#map-geolocator",
        "align": "left",
        "alt": "Map Pin Icon"
      },
      "label": "Find My Location",
      "style": "default",
      "type": "button"
    }
    </script>
  </div>

Here is an example with the button disabled. Use the 'inactive' property to disable the button, and the 'inverse' property to reverse the colors for dark backgrounds.


  <div data-pestle-module="CTAButton">
    <script type="text/json" data-pestle-options>
    {
      "icon": {
        "name": "#map-geolocator",
        "align": "left",
        "alt": "Map Pin Icon"
      },
      "inactive": "true",
      "inverse": "false",
      "label": "Find My Location",
      "style": "default",
      "type": "button"
    }
    </script>
  </div>

When 'type' is set to 'link', the style is overwritten as 'naked', despite the value entered in the 'style' field. Options are available for URL, Target, and Title. Use the 'trackingCodes' object to enter analytics tracking information.


  <div data-pestle-module="CTAButton">
    <script type="text/json" data-pestle-options>
    {
      "icon": {
        "name": "#share",
        "align": "left",
        "alt": "Sharing is Caring"
      },
      "inactive": "false",
      "inverse": "false",
      "label": "Share This Article",
      "link": {
        "target": "_blank",
        "title": "Link to External Page",
        "trackingCodes": {
        "utmSource": "google",
        "utmMedium": "cpc",
        "utmTerm": ["nature", "reptile", "animal", "swamp", "forest"],
        "utmContent": "textLink",
        "utmCampaign": "nature_photos"
        },
        "url": "http://www.example.com"
      },
      "style": "default",
      "type": "link"
    }
    </script>
  </div>
 

Photo Gallery

This is Mortar's Photo Gallery component.

The Photo Gallery has many different options to configure it. Here is an example with what could be considered mostly default values.


  <div data-pestle-module="PhotoGallery">
  <script type="text/json" data-pestle-options>
    {
      "frameAspectRatio": "photo",
      "letterboxBackgroundColor": "light",
      "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
      "infinite": false,
      "letterbox": true,
      "showArrows": true,
      "showCounter": true,
      "slides": [
        {
          "aspectRatio": "broadcast",
          "assetSource": "National Geographic",
          "caption": "This is Caption One",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/350x150.jpg",
          "srcset": [
            "http://placehold.it/350x150.jpg 350w",
            "http://placehold.it/700x300.jpg 700w",
            "http://placehold.it/1400x600.jpg 1400w"
          ],
          "title": "This is Title One",
          "type": "image"
        },
        {
          "aspectRatio": "photo",
          "assetSource": "National Geographic",
          "caption": "This is Caption Two",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/350x150.jpg",
          "srcset": [
            "http://placehold.it/350x150.jpg 350w",
            "http://placehold.it/700x300.jpg 700w",
            "http://placehold.it/1400x600.jpg 1400w"
          ],
          "title": "This is Title Two",
          "type": "image"
        },
        {
          "aspectRatio": "tv",
          "assetSource": "National Geographic",
          "caption": "This is Caption Three",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/300x200.jpg",
          "srcset": [
            "http://placehold.it/300x200.jpg 300w",
            "http://placehold.it/600x400.jpg 600w",
            "http://placehold.it/1200x800.jpg 1200w"
          ],
          "title": "This is Title Three",
          "type": "image"
        }
      ],
      "title": "This is the title"
      }
  </script>
  </div>

Here is an example of an infinite gallery, with arrows and counter hidden. The background has been changed to dark.


  <div data-pestle-module="PhotoGallery">
  <script type="text/json" data-pestle-options>
    {
      "frameAspectRatio": "photo",
      "letterboxBackgroundColor": "dark",
      "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
      "infinite": true,
      "letterbox": true,
      "showArrows": false,
      "showCounter": false,
      "slides": [
        {
          "aspectRatio": "broadcast",
          "assetSource": "National Geographic",
          "caption": "This is Caption One",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/350x150.jpg",
          "srcset": [
            "http://placehold.it/350x150.jpg 350w",
            "http://placehold.it/700x300.jpg 700w",
            "http://placehold.it/1400x600.jpg 1400w"
          ],
          "title": "This is Title One",
          "type": "image"
        },
        {
          "aspectRatio": "photo",
          "assetSource": "National Geographic",
          "caption": "This is Caption Two",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/350x150.jpg",
          "srcset": [
            "http://placehold.it/350x150.jpg 350w",
            "http://placehold.it/700x300.jpg 700w",
            "http://placehold.it/1400x600.jpg 1400w"
          ],
          "title": "This is Title Two",
          "type": "image"
        },
        {
          "aspectRatio": "tv",
          "assetSource": "National Geographic",
          "caption": "This is Caption Three",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/300x200.jpg",
          "srcset": [
            "http://placehold.it/300x200.jpg 300w",
            "http://placehold.it/600x400.jpg 600w",
            "http://placehold.it/1200x800.jpg 1200w"
          ],
          "title": "This is Title Three",
          "type": "image"
        }
      ],
      "title": "This is the title"
      }
  </script>
  </div>

Here is an example of an infinite gallery, with letterboxing turned off.


  <div data-pestle-module="PhotoGallery">
  <script type="text/json" data-pestle-options>
    {
      "frameAspectRatio": "photo",
      "letterboxBackgroundColor": "dark",
      "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
      "infinite": true,
      "letterbox": false,
      "showArrows": true,
      "showCounter": true,
      "slides": [
        {
          "aspectRatio": "broadcast",
          "assetSource": "National Geographic",
          "caption": "This is Caption One",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/350x150.jpg",
          "srcset": [
            "http://placehold.it/350x150.jpg 350w",
            "http://placehold.it/700x300.jpg 700w",
            "http://placehold.it/1400x600.jpg 1400w"
          ],
          "title": "This is Title One",
          "type": "image"
        },
        {
          "aspectRatio": "photo",
          "assetSource": "National Geographic",
          "caption": "This is Caption Two",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/350x150.jpg",
          "srcset": [
            "http://placehold.it/350x150.jpg 350w",
            "http://placehold.it/700x300.jpg 700w",
            "http://placehold.it/1400x600.jpg 1400w"
          ],
          "title": "This is Title Two",
          "type": "image"
        },
        {
          "aspectRatio": "tv",
          "assetSource": "National Geographic",
          "caption": "This is Caption Three",
          "credit": "Joel Sartore",
          "src": "http://placehold.it/300x200.jpg",
          "srcset": [
            "http://placehold.it/300x200.jpg 300w",
            "http://placehold.it/600x400.jpg 600w",
            "http://placehold.it/1200x800.jpg 1200w"
          ],
          "title": "This is Title Three",
          "type": "image"
        }
      ],
      "title": "This is the title"
      }
  </script>
  </div>
 

Promo Card

This is Mortar's Promo Card component.

The Promo Card has many different options to configure it. Here is an example with what could be considered mostly default values.

        
        <div data-pestle-module="PromoCard">
          <script type="text/json" data-pestle-options>
            {
              "id": "hero_promocard_0",
              "type": "article",
              "config": {
                "aspectRatio": "photo",
                "sponsored": false,
                "showPlayButton": false,
                "showByline": true
              },
              "link": {
                "url": "http://ngm.nationalgeographic.com/2007/05/zambia-wildlife/eckstrom-text",
                "target": "_blank",
                "trackingCodes": [
                  "utm_medium=website",
                  "utm_source=site"
                ]
              },
              "leadMedia": [{
                "url": "http://placehold.it/800x600",
                "aspectRatio": 0.6667,
                "altText": "Picture of a caiman swimming underwater in Pantanal, Brazil",
                "srcset": ["http://placehold.it/400x300 400w", "http://placehold.it/800x600 800w", "http://placehold.it/1600x1200 1600w"],
              }],
              "text": {
                "title": "This is the title of the card",
                "dek": "This is a short dek for the card.",
                "kicker" {
                  "label": "Weird & Wild",
                  "url": "http://news.nationalgeographic.com/2016/08/shark-attack/",
                  "target": "_self",
                  "trackingCodes": "?utm_medium=site&utm_source=ng.com"
                },
                "byline": "This is a great byline",
                "duration": "",
                "publishDate": "Thu Aug 04 13:30:39 EDT 2016",
                "sponsorContentLabel": "This is the sponsor content label"
              },
              "modal": false,
              "brandingBadgeLabel": ""
            }
          </script>
        </div>
        
      

Here is an example with sponsor content which links to a story with lead video, with the title and byline hidden.

        
          <div data-pestle-module="PromoCard">
          <script type="text/json" data-pestle-options>
            {
              "id": "hero_promocard_1",
              "type": "article",
              "config": {
                "aspectRatio": "photo",
                "sponsored": true,
                "showPlayButton": true,
                "showByline": true
              },
              "link": {
                "url": "http://ngm.nationalgeographic.com/2007/05/zambia-wildlife/eckstrom-text",
                "target": "_blank",
                "trackingCodes": [
                  "utm_medium=website",
                  "utm_source=site"
                ]
              },
              "leadMedia": [{
                "url": "http://placehold.it/800x600",
                "aspectRatio": 0.6667,
                "altText": "Picture of a caiman swimming underwater in Pantanal, Brazil",
                "srcset": ["http://placehold.it/400x300 400w", "http://placehold.it/800x600 800w", "http://placehold.it/1600x1200 1600w"],
              }],
              "text": {
                "title": "",
                "dek": "This is a short dek for the card.",
                "kicker" {
                  "label": "Weird & Wild",
                  "url": "http://news.nationalgeographic.com/2016/08/shark-attack/",
                  "target": "_self",
                  "trackingCodes": "?utm_medium=site&utm_source=ng.com"
                },
                "byline": "",
                "duration": "",
                "publishDate": "Thu Aug 04 13:30:39 EDT 2016",
                "sponsorContentLabel": "This is the Sponsor Content Label"
              },
              "modal": false,
              "brandingBadgeLabel": ""
            }
          </script>
          </div>
        
      

Here is an example of a text only card.

        
          <div data-pestle-module="PromoCard">
          <script type="text/json" data-pestle-options>
            {
              "id": "hero_promocard_2",
              "type": "article",
              "config": {
                "aspectRatio": "photo",
                "sponsored": false
              },
              "link": {
                "url": "http://ngm.nationalgeographic.com/2007/05/zambia-wildlife/eckstrom-text",
                "target": "_blank",
                "trackingCodes": [
                  "utm_medium=website",
                  "utm_source=site"
                ]
              },
              "text": {
                "title": "This is a Title",
                "dek": "This is a short dek for the card.",
                "kicker" {
                  "label": "Weird & Wild",
                  "url": "http://news.nationalgeographic.com/2016/08/shark-attack/",
                  "target": "_self",
                  "trackingCodes": "?utm_medium=site&utm_source=ng.com"
                },
                "byline": "This is a great byline",
                "duration": "02:00",
                "publishDate": "Thu Aug 04 13:30:39 EDT 2016",
                "sponsorContentLabel": ""
              },
              "modal": false,
              "brandingBadgeLabel": ""
            }
          </script>
          </div>
        
      
 

Video

The basic Video component's only concern is putting a version of the modules-video video player into the DOM and instantiating the video player


  <div data-pestle-module="Video">
    <script type="text/json" data-pestle-options>
    {
        "className": "", //appended to the wrapping class. Can be empty
        "lazyLoad": true, //tells the component to lazy load the video in
        "isEditMode": false, //will be used by AEM to not load in the video in edit mode
        "model": {
          "autoPlay": false,
          "autoload": true,
          "debugLib": false,
          "guid": "00000152-7f14-d480-a756-7ffe2c710000", // identifies specific video from MPX to play
          "instance": "platformPlaylistVideoPlayer_v1nigrk4", // the naming is arbitrary, but needs to be unique so that multiple players can exist on the same page
          "layoutOptions": {
            "tpShareFNG": true
          },
          "overlayPlayButton": true,
          "sharing": true,
          "skinName": "glass-ngs",
          "type": "fng"

        }
    }
    </script>
  </div>
 

Video Playlist

Basic Video Playlist component

The Video Playlist Component basic functionality and support for autoContinue playback. The component receives an endpoint which provides the items to populate it. Also, it uses Lazy load in order to get the information on-demand.

This is the way to create a Video Playlist with autocontinue playback support. Autocontinue property is by default enabled.


        <div data-pestle-module="VideoPlaylist">
          <script type="text/json" data-pestle-options>
          {
              "id": "os1bq322",
              "endpoint": "http://www.nationalgeographic.com/versions/20160804-v1/_jcr_content/content/videoplaylist.promo-all.json"
          }
          </script>
        </div>

This is the way to create a Video Playlist without autocontinue playback support.


        <div data-pestle-module="VideoPlaylist">
          <script type="text/json" data-pestle-options>
          {
              "id": "os1bq328",
              "endpoint": "http://www.nationalgeographic.com/versions/20160804-v1/_jcr_content/content/videoplaylist.promo-all.json",
              "autoContinue": false
          }
          </script>
        </div>