University of Florida College of the Arts Pattern Library

Color Circle Icon: Boy 

<!-- Error rendering component -->
<!-- Error: Template /bits/icons/boy.twig not found -->
<!-- Error: Error: Template /bits/icons/boy.twig not found
    at /workspaces/app/web/app/themes/custom/node_modules/@frctl/twig/src/adapter.js:156:24
    at new Promise (<anonymous>)
    at TwigAdapter.render (/workspaces/app/web/app/themes/custom/node_modules/@frctl/twig/src/adapter.js:134:16)
    at ComponentSource._renderVariant (/workspaces/app/web/app/themes/custom/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/workspaces/app/web/app/themes/custom/node_modules/co/index.js:65:19) -->
 
<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": "boy"
  }
}
  • 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.