Landing page template | New Relic Documentation

Landing pages are a specialized type of page that serve as the starting pages for various New Relic products. For example, you'll see landing pages for Application monitoring (APM) and Browser monitoring.

Important

This landing page information does not apply to the docs home page.

If you need to create a new landing page, you can either copy an existing landing page, or you can modify the sample landing page shown at the bottom.

The next sections look at what you need to include for each landing page.

Front matter

When you insert the front matter, be sure to designate the type as landingPage. Here's an example:

---
title: APM
type: landingPage
---

Tip

In the front matter, the following are optional: tags, translate, and redirects. So, you can leave them out if they don't have any values.

Introduction section

Following the front matter, the first content section is a two-column introduction (also called the hero section). This includes the following:

A <LandingPageHero> component wrapping all the introductory content.
A <HeroContent> component wrapping the text portion of the introduction (the content in the left column).
An image or video (appears in the right column).
A caption (optional), which is wrapped by the <figcaption> component.

Here's an example of the hero section that shows you where to insert your content:

<LandingPageHero>
  <HeroContent>
    INSERT_PARAGRAPHS_FOR_YOUR_INTRODUCTION
  </HeroContent>

  ![INSERT_ALT-TEXT_HERE](./images/INSERT_IMAGE_FILE_NAME.png "INSERT_THE_IMAGE_TITLE_HERE")

  <figcaption>
    INSERT_OPTIONAL_CAPTION_USING_SAME_INDENTATION_AS_IMAGE
  </figcaption>
</LandingPageHero>

Tiles

Tiles are a series of boxes after the introduction. They contain the main subject areas for your product. You should just list these in order you want them to appear, and the cascading style sheet will render them across the page.

Here's an example of a tile:

<LandingPageTileGrid>
  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE."
    href="/docs/INSERT_THE_DIRECTORY_PATH_TO_THE_TARGET_LANDING_PAGE_INDEX.HTML"
    icon="fe-INSERT_THE_ICON_NAME"
  >

INSERT_TILE_CONTENT_HERE...

</LandingPageTile>
...

For each tile, do the following:

Insert a value for title that explains the purpose of the category.
Insert a value for href that links to the target landing page. If the target landing page is index.html, you can just include the directory path with no filename since index.html is the default (it doesn't cause any problems if you include index.html).
Insert a value for icon by prefixing the icon name with fe- (Feather icons), logo- (third-party logos), or nr- (New Relic logos). For example, here is the format for a feather icon: fe-alert-triangle).
Tip
For more details about icons, see Embed images.
Between the LandingPageTile tags, insert text, such as a bullet list with links to product documentation.

Button for viewing all docs in the category

After your tiles, you should have a single button that offers to take users to all the documentation for that category.

The table of contents page that gets linked here is always at the same path as the landing page, but with /table-of-contents appended to it. These table of contents pages get built automatically for every landing page. For example, if this landing page was located at /docs/apm, this link should be /docs/apm/table-of-contents.

Here's an example:

<ButtonLink
  role="button"
  to="INSERT_LINK_TO_DIRECTORY_WITH_ALL_THESE_DOCS/table-of-contents"
  variant="normal"
>
  View all INSERT_YOUR_CATEGORY_HERE docs
</ButtonLink>

Code sample

Here's a sample landing page you could modify to suit your needs:

---
title: INSERT_YOUR_TITLE_HERE
type: landingPage
---

<LandingPageHero>
  <HeroContent>
    INSERT_PARAGRAPHS_FOR_YOUR_INTRODUCTION
  </HeroContent>

  ![INSERT_ALT-TEXT_HERE](./images/INSERT_IMAGE_FILE_NAME.png "INSERT_THE_IMAGE_TITLE_HERE")

  <figcaption>
    INSERT_OPTIONAL_CAPTION_USING_SAME_INDENTATION_AS_IMAGE
  </figcaption>
</LandingPageHero>

<LandingPageTileGrid>
  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE"
    icon="fe-INSERT_ICON_NAME_HERE"
  >
    * [INSERT_LINK_NAME](INSERT_LINK_URL) Aliquam auctor mattis nisl ut iaculis.
    * [INSERT_LINK_NAME](INSERT_LINK_URL) Suspendisse pharetra elit sit amet risus euismod, a consectetur tortor vulputate. 
  </LandingPageTile>

  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE"
    icon="fe-INSERT_ICON_NAME_HERE"
  >
    * Use [INSERT_LINK_NAME](INSERT_LINK_URL) to lectus diam, ornare vitae dui suscipit, laoreet ultrices lacus.
    * Mauris tempor massa ac augue mattis, nec pharetra quam mollis [INSERT_LINK_NAME](INSERT_LINK_URL).
  </LandingPageTile>

  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE"
    icon="fe-INSERT_ICON_NAME_HERE"
  >
    * Use [INSERT_LINK_NAME](INSERT_LINK_URL) rhoncus tortor vitae libero laoreet feugiat.
    * Donec dui elit, fermentum vel faucibus sed, rhoncus in felis [INSERT_LINK_NAME](INSERT_LINK_URL).
  </LandingPageTile>

  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE"
    icon="fe-INSERT_ICON_NAME_HERE"
  >
    * Use [INSERT_LINK_NAME](INSERT_LINK_URL) uspendisse pharetra elit sit amet risus euismod.
    * Pellentesque finibus magna vitae hendrerit gravida [INSERT_LINK_NAME](INSERT_LINK_URL).
  </LandingPageTile>

  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE"
    icon="fe-INSERT_ICON_NAME_HERE"
  >
    * Use [INSERT_LINK_NAME](INSERT_LINK_URL) Etiam imperdiet felis eu ipsum consequat tristique.
    * Etiam imperdiet felis eu ipsum consequat tristique [INSERT_LINK_NAME](INSERT_LINK_URL).
  </LandingPageTile>

  <LandingPageTile
    title="INSERT_YOUR_BOX_TITLE_HERE"
    icon="fe-INSERT_ICON_NAME_HERE"
  >
    * Use [INSERT_LINK_NAME](INSERT_LINK_URL) Quisque hendrerit, dolor sed sodales aliquet.
    * Vestibulum varius lectus ac velit euismod [INSERT_LINK_NAME](INSERT_LINK_URL).
  </LandingPageTile>
</LandingPageTileGrid>

<ButtonLink
  role="button"
  to="INSERT_LINK_TO_DIRECTORY_WITH_ALL_THESE_DOCS/table-of-contents"
  variant="normal"
>
  View all INSERT_YOUR_CATEGORY_HERE docs
</ButtonLink>