Page titles

Page titles can be either H1s, links or spans. This is all dependant on their context.

Page titles are also truncated to help with long place name combinations.

France
Country or Continent title (not a link)
= ui_component('place_title', properties: {as_below} )
{
  no_place_link: true,
  title: "France"
}
World title (not a link) with custom icon
= ui_component('place_title', properties: {as_below} )
{
  no_place_link: true,
  title: "World",
  icon: "globe",
  primary_submenu: {
    submenu: [
      {
        title: "Africa",
        slug: "https://www.lonelyplanet.com/africa",
        show_responsive_toggle: true
      },
      {
        title: "Antarctica",
        slug: "https://www.lonelyplanet.com/antarctica-1007062",
        show_responsive_toggle: true
      },
      {
        title: "Asia",
        slug: "https://www.lonelyplanet.com/asia",
        show_responsive_toggle: true
      },
      {
        title: "Caribbean",
        slug: "https://www.lonelyplanet.com/caribbean",
        show_responsive_toggle: true
      }
    ]
  }
}
Place title on subsection pages (as a link)
= ui_component('place_title', properties: {as_below} )
{
  title: "Paris",
  slug: "/france/paris",
  parent: "France",
  parent_slug: "/france"
}
A very long and truncated place title
= ui_component('place_title', properties: {as_below} )
{
  no_place_link: true,
  title: "The city of Jerusalem",
  parent: "Israel and the Palestinian Territories",
  parent_slug: "/israel-and-the-palestinian-territories/",
  show_responsive_toggle: true
}
A very long and truncated place title, with submenu in primary and parent
= ui_component('place_title', properties: {as_below} )
{
  no_place_link: true,
  title: "The city of Jerusalem",
  parent: "Israel and the Palestinian Territories",
  parent_slug: "/israel-and-the-palestinian-territories/",
  show_responsive_toggle: true,
  primary_submenu: {
    submenu: [
      {
        title: "Africa",
        slug: "https://www.lonelyplanet.com/africa",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      },
      {
        title: "Antarctica",
        slug: "https://www.lonelyplanet.com/antarctica-1007062",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      },
      {
        title: "Asia",
        slug: "https://www.lonelyplanet.com/asia",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      },
      {
        title: "Caribbean",
        slug: "https://www.lonelyplanet.com/caribbean",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      }
    ]
  },
  parent_submenu: {
    submenu: [
      {
        title: "Africa",
        slug: "https://www.lonelyplanet.com/africa",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      },
      {
        title: "Antarctica",
        slug: "https://www.lonelyplanet.com/antarctica-1007062",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      },
      {
        title: "Asia",
        slug: "https://www.lonelyplanet.com/asia",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      },
      {
        title: "Caribbean",
        slug: "https://www.lonelyplanet.com/caribbean",
        show_responsive_toggle: true,
        image_url: "https://cache.graphicslib.viator.com/graphicslib/thumbs674x446/5022/SITours/moulin-rouge-show-paris-in-paris-116546.jpg"
      }
    ]
  }
}
Page title as a H1, with submenu
= ui_component('place_title', properties: {as_below} )
{
  is_body_title: true,
  title: "Search this page",
  primary_submenu: {
    submenu: [
      {
        title: "Africa",
        slug: "https://www.lonelyplanet.com/africa",
        show_responsive_toggle: true
      },
      {
        title: "Antarctica",
        slug: "https://www.lonelyplanet.com/antarctica-1007062",
        show_responsive_toggle: true
      },
      {
        title: "Asia",
        slug: "https://www.lonelyplanet.com/asia",
        show_responsive_toggle: true
      },
      {
        title: "Caribbean",
        slug: "https://www.lonelyplanet.com/caribbean",
        show_responsive_toggle: true
      }
    ]
  }
}
Place title with a parent (not a link) and parent submenu only
= ui_component('place_title', properties: {as_below} )
{
  no_place_link: true,
  title: "Paris",
  parent: "France",
  parent_slug: "/france",
  parent_submenu: {
    submenu: [
      {
        title: "Africa",
        slug: "https://www.lonelyplanet.com/africa",
        show_responsive_toggle: true
      },
      {
        title: "Antarctica",
        slug: "https://www.lonelyplanet.com/antarctica-1007062",
        show_responsive_toggle: true
      },
      {
        title: "Asia",
        slug: "https://www.lonelyplanet.com/asia",
        show_responsive_toggle: true
      },
      {
        title: "Caribbean",
        slug: "https://www.lonelyplanet.com/caribbean",
        show_responsive_toggle: true
      }
    ]
  }
}