Frames Logo
Buy Now - $200

Contact Section Foxtrot

overview

A versatile, dynamic map frame for displaying locations with markers.

Contact Section Foxtrot
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

Contact Section Foxtrot is a perfect frame for any business with multiple locations or service areas. It’ll show the locations or service areas in a slider or list while displaying markers on a map with a subtle pulse animation.

The map is an SVG that can be swapped out for any map: a country map, a state map, or even a single city map. You can also change the map’s color from the builder settings panel.

The location slider cards and the map markers are query-loop compatible, making the entire map dynamic.

Query Loop Compatible

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.
--marker-color
--marker-max-size
--marker-min-size
--marker-accent-color
--marker-pulse-color
--label-offset-block-start
--label-offset-block-end
--label-offset-inline-start
--label-offset-inline-end
--label-background-color
--label-font-color
--label-font-size
--label-radius

Related Frames

Location Card Alpha

Location Card Alpha

Contact Grid Alpha

World Map Alpha

World Map Alpha

Related Components

No related components.

FAQs

  • How do I make the markers dynamic?

    For dynamic markers, follow these steps:

    1. Create a locations CPT to organize your locations.
    2. Add custom fields to the locations posts for Top Position and Left Position coordinates.
    3. Map dynamic data to the data attributes attached to the marker (see below)
    4. Set the query loop on the marker to pull posts from your locations CPT.

    Map the data attributes like this:

    • data-marker-label = Contact Section Foxtrot
    • aria-label = Location: Contact Section Foxtrot
    • data-marker-inset-top = Your top position custom field
    • data-marker-inset-left = Your left position custom field

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.