Marker

Ready Added in 2.0.0

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

Usage

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

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

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

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