Skip to main content

Documentation

Marker

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

Usage

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>

Note Add the .uk-light or .uk-dark class, so that elements will be optimized for better visibility on dark or light images.

<div class="uk-child-width-1-2" uk-grid>
    <div>
        <div class="uk-inline uk-dark">
            <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 uk-light">
            <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.

Internationalization

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

Key Default Description
label Open aria-label attribute.