Marker

Create a marker icon that can be displayed on top of images.

Usage

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Margin component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        marker: {
            hooks: {}
        }
    }
}),

To apply this component, add the uk-marker attribute to any element. You can use the Position component to place the marker on top of an image. Also add the .uk-transform-center classes from the Utility component to center the marker itself to its upper left corner.

<a href="" uk-marker></a>

<div class="uk-child-width-1-2" uk-grid>
  <div>
    <div class="uk-inline">
      <img src="/images/light.jpg" width="1800" height="1200" alt="" />
      <a
        class="uk-position-absolute uk-transform-center"
        style="left: 20%; top: 30%"
        href="#"
        uk-marker
      ></a>
      <a
        class="uk-position-absolute uk-transform-center"
        style="left: 60%; top: 40%"
        href="#"
        uk-marker
      ></a>
      <a
        class="uk-position-absolute uk-transform-center"
        style="left: 80%; top: 70%"
        href="#"
        uk-marker
      ></a>
    </div>
  </div>
  <div>
    <div class="uk-inline">
      <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
      <a
        class="uk-position-absolute uk-transform-center"
        style="left: 20%; top: 30%"
        href="#"
        uk-marker
      ></a>
      <a
        class="uk-position-absolute uk-transform-center"
        style="left: 60%; top: 40%"
        href="#"
        uk-marker
      ></a>
      <a
        class="uk-position-absolute uk-transform-center"
        style="left: 80%; top: 70%"
        href="#"
        uk-marker
      ></a>
    </div>
  </div>
</div>

Accessibility

The Marker component automatically sets the appropriate WAI-ARIA roles, states and properties.

The marker has the aria-label property, and if an <a> element is used, the button role.

Internationalization

The Marker component uses the following translation strings. Learn more about translating components.

Key	Default	Description
`label`	`Open`	`aria-label` attribute.