University of Florida College of the Arts Pattern Library

Color Circle Icon: Help 

<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="help">
                <mask id="mask0_4758_3608" 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_3608)">
                    <path id="help_2" d="M7.96634 12.0002C8.19967 12.0002 8.3969 11.9196 8.55801 11.7585C8.71912 11.5974 8.79967 11.4002 8.79967 11.1668C8.79967 10.9335 8.71912 10.7363 8.55801 10.5752C8.3969 10.4141 8.19967 10.3335 7.96634 10.3335C7.73301 10.3335 7.53579 10.4141 7.37467 10.5752C7.21356 10.7363 7.13301 10.9335 7.13301 11.1668C7.13301 11.4002 7.21356 11.5974 7.37467 11.7585C7.53579 11.9196 7.73301 12.0002 7.96634 12.0002ZM7.36634 9.4335H8.59968C8.59968 9.06683 8.64134 8.77794 8.72468 8.56683C8.80801 8.35572 9.04412 8.06683 9.43301 7.70016C9.7219 7.41127 9.94967 7.13627 10.1163 6.87516C10.283 6.61405 10.3663 6.30016 10.3663 5.9335C10.3663 5.31127 10.1386 4.8335 9.68301 4.50016C9.22745 4.16683 8.68856 4.00016 8.06634 4.00016C7.43301 4.00016 6.91912 4.16683 6.52467 4.50016C6.13023 4.8335 5.85523 5.2335 5.69967 5.70016L6.79967 6.1335C6.85523 5.9335 6.98023 5.71683 7.17467 5.4835C7.36912 5.25016 7.66634 5.1335 8.06634 5.1335C8.4219 5.1335 8.68856 5.23072 8.86634 5.42516C9.04412 5.61961 9.13301 5.8335 9.13301 6.06683C9.13301 6.28905 9.06634 6.49739 8.93301 6.69183C8.79967 6.88627 8.63301 7.06683 8.43301 7.2335C7.94412 7.66683 7.64412 7.99461 7.53301 8.21683C7.4219 8.43905 7.36634 8.84461 7.36634 9.4335ZM7.99967 14.6668C7.07745 14.6668 6.21079 14.4918 5.39967 14.1418C4.58856 13.7918 3.88301 13.3168 3.28301 12.7168C2.68301 12.1168 2.20801 11.4113 1.85801 10.6002C1.50801 9.78905 1.33301 8.92239 1.33301 8.00016C1.33301 7.07794 1.50801 6.21127 1.85801 5.40016C2.20801 4.58905 2.68301 3.8835 3.28301 3.2835C3.88301 2.6835 4.58856 2.2085 5.39967 1.8585C6.21079 1.5085 7.07745 1.3335 7.99967 1.3335C8.9219 1.3335 9.78856 1.5085 10.5997 1.8585C11.4108 2.2085 12.1163 2.6835 12.7163 3.2835C13.3163 3.8835 13.7913 4.58905 14.1413 5.40016C14.4913 6.21127 14.6663 7.07794 14.6663 8.00016C14.6663 8.92239 14.4913 9.78905 14.1413 10.6002C13.7913 11.4113 13.3163 12.1168 12.7163 12.7168C12.1163 13.3168 11.4108 13.7918 10.5997 14.1418C9.78856 14.4918 8.9219 14.6668 7.99967 14.6668ZM7.99967 13.3335C9.48856 13.3335 10.7497 12.8168 11.783 11.7835C12.8163 10.7502 13.333 9.48905 13.333 8.00016C13.333 6.51127 12.8163 5.25016 11.783 4.21683C10.7497 3.1835 9.48856 2.66683 7.99967 2.66683C6.51079 2.66683 5.24967 3.1835 4.21634 4.21683C3.18301 5.25016 2.66634 6.51127 2.66634 8.00016C2.66634 9.48905 3.18301 10.7502 4.21634 11.7835C5.24967 12.8168 6.51079 13.3335 7.99967 13.3335Z" 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": "help"
  }
}
  • 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.