University of Florida College of the Arts Pattern Library

Color Circle Icon: Location 

<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
    <span class="color-circle-icon__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
            <g id="location_on">
                <mask id="mask0_4758_35610" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
                    <rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
                </mask>
                <g mask="url(#mask0_4758_35610)">
                    <path id="location_on_2" d="M8.00033 8.00016C8.36699 8.00016 8.68088 7.86961 8.94199 7.6085C9.2031 7.34739 9.33366 7.0335 9.33366 6.66683C9.33366 6.30016 9.2031 5.98627 8.94199 5.72516C8.68088 5.46405 8.36699 5.3335 8.00033 5.3335C7.63366 5.3335 7.31977 5.46405 7.05866 5.72516C6.79755 5.98627 6.66699 6.30016 6.66699 6.66683C6.66699 7.0335 6.79755 7.34739 7.05866 7.6085C7.31977 7.86961 7.63366 8.00016 8.00033 8.00016ZM8.00033 12.9002C9.35588 11.6557 10.3614 10.5252 11.017 9.5085C11.6725 8.49183 12.0003 7.58905 12.0003 6.80016C12.0003 5.58905 11.6142 4.59738 10.842 3.82516C10.0698 3.05294 9.12255 2.66683 8.00033 2.66683C6.8781 2.66683 5.93088 3.05294 5.15866 3.82516C4.38644 4.59738 4.00033 5.58905 4.00033 6.80016C4.00033 7.58905 4.3281 8.49183 4.98366 9.5085C5.63921 10.5252 6.64477 11.6557 8.00033 12.9002ZM8.00033 14.6668C6.21144 13.1446 4.87533 11.7307 3.99199 10.4252C3.10866 9.11961 2.66699 7.91127 2.66699 6.80016C2.66699 5.1335 3.2031 3.80572 4.27533 2.81683C5.34755 1.82794 6.58921 1.3335 8.00033 1.3335C9.41144 1.3335 10.6531 1.82794 11.7253 2.81683C12.7975 3.80572 13.3337 5.1335 13.3337 6.80016C13.3337 7.91127 12.892 9.11961 12.0087 10.4252C11.1253 11.7307 9.78921 13.1446 8.00033 14.6668Z" fill="white" />
                </g>
            </g>
        </svg>
    </span>
</div>
 
<div class="color-circle-icon color-circle-icon--{{ background|default('orange') }} color-circle-icon--{{ size|default('big') }}">
    {% if icon %}
        <span class="color-circle-icon__icon">
            {% include 'bits/icons/'~ icon.name ~'.twig' %}
        </span>
    {% endif %}
</div>
 
{
  "background": "orange",
  "icon": {
    "name": "location"
  }
}
  • Content: 
    .color-circle-icon
    --backgroundColor orange
    --iconColor white
    --iconSize 24px

    &--orange
        --backgroundColor orange

    &--blue
        --backgroundColor blue500

    &--small
        --iconSize 16px

    &--big
        --iconSize 24px

    align-items center
    background-color var(--backgroundColor)
    border 2px solid var(--borderColor)
    border-radius 50%
    display flex
    justify-content center
    height 48px
    width 48px

    &__icon
        display flex

    &__icon > svg
        height var(--iconSize)
        width var(--iconSize)

    &__icon > svg > path
        fill var(--iconColor)
  • URL: /components/raw/color-circle-icon/color-circle-icon.styl
  • Filesystem Path: patterns/bits/color-circle-icon/color-circle-icon.styl
  • Size: 635 Bytes

No notes defined.