Add icon next to Distance element on Location cards

Search Best Practices - Search Front-End
1

Hi Team,

I really like the new distance component on location cards in Jambo! What kind of customization do we support in terms of including additional icons on a given card? For example, as you can see in the screenshot below, I’d love to include a map pin to the left of the distance. Is this possible?

image

Thank you,
Austin

2

Hi Austin,

You can do this by editing the handlebars template for your custom card! You’ll just need to add this icon before where the template adds the distance. Here, we’re adding an inline SVG, but you could easily add an image tag or a reference to an asset url.

template.hbs

{{#*inline 'distance'}}
{{#if card.distance}}
<div class="HitchhikerLocationStandard-distance">
  <div class="HitchhikerLocationStandard-distanceIcon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 20"><path d="M7 0C3.13 0 0 3.13 0 7c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5C5.62 9.5 4.5 8.38 4.5 7S5.62 4.5 7 4.5 9.5 5.62 9.5 7 8.38 9.5 7 9.5z"></path></svg>
  </div>
  {{card.distance}}
</div>
{{/if}}
{{/inline}}

Next we need to style it - add the below to your answers.scss file:

   .HitchhikerLocationStandard-distance {
      display: flex;
    }

    .HitchhikerLocationStandard-distanceIcon {
      height: 1em;
      width: 1em;
      margin-top: .1rem;
      fill: var(--yxt-color-brand-primary);
      margin-right: .25rem;
    }

That will produce a pin like the below:
image

You can play with the CSS if you want to increase the size or spacing of the icon. Let me know if this helps!