University of Florida College of the Arts Pattern Library

Color Circle Icon: Link 

<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="link">
                <mask id="mask0_4758_22463" 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_22463)">
                    <path id="link_2" d="M7.33301 11.3332H4.66634C3.74412 11.3332 2.95801 11.0082 2.30801 10.3582C1.65801 9.70817 1.33301 8.92206 1.33301 7.99984C1.33301 7.07761 1.65801 6.2915 2.30801 5.6415C2.95801 4.9915 3.74412 4.6665 4.66634 4.6665H7.33301V5.99984H4.66634C4.11079 5.99984 3.63856 6.19428 3.24967 6.58317C2.86079 6.97206 2.66634 7.44428 2.66634 7.99984C2.66634 8.55539 2.86079 9.02761 3.24967 9.4165C3.63856 9.80539 4.11079 9.99984 4.66634 9.99984H7.33301V11.3332ZM5.33301 8.6665V7.33317H10.6663V8.6665H5.33301ZM8.66634 11.3332V9.99984H11.333C11.8886 9.99984 12.3608 9.80539 12.7497 9.4165C13.1386 9.02761 13.333 8.55539 13.333 7.99984C13.333 7.44428 13.1386 6.97206 12.7497 6.58317C12.3608 6.19428 11.8886 5.99984 11.333 5.99984H8.66634V4.6665H11.333C12.2552 4.6665 13.0413 4.9915 13.6913 5.6415C14.3413 6.2915 14.6663 7.07761 14.6663 7.99984C14.6663 8.92206 14.3413 9.70817 13.6913 10.3582C13.0413 11.0082 12.2552 11.3332 11.333 11.3332H8.66634Z" 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": "link"
  }
}
  • 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.