Custom theme (replace with client name)

List Link: Default 

<!-- Error rendering component -->
<!-- Error: Template /bits/icons/-link.twig not found -->
<!-- Error: Error: Template /bits/icons/-link.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="list-link__container">
    <a
        href="{{ fields.linkUrl }}"
        class="list-link"
        {{ (type == 'external' or type == 'file') ? 'target="_blank" rel="noopener"' }}
        {% set onClick %}onClick="window.open(this.href,'targetWindow','toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); return false;"{% endset %}
        {{ dialog ? onClick }}
    >
        {{ fields.linkText }}
        {{ fields.linkType }}
        <span class="list-link__icon">{% include 'bits/icons/'~ fields.linkType ~'-link.twig' %}</span>
    </a>
</div>
 
{
  "type": "external",
  "className": "",
  "text": "External Link",
  "external_url": "https://google.com",
  "internal_url": "",
  "file_url": ""
}
  • Content: 
    .list-link
    --iconFillColor darkOrange
    --linkColor charcoalLight
    --linkColorActive darkOrange

    @extends $linkSmall
    transition all 0.3s
    color var(--linkColor)
    display flex
    flex-direction row
    justify-content space-between
    align-items center
    width 100%
    margin-bottom 2px
    padding 14px 16px
    font-weight 500
    background-color white
    text-decoration none

    &:last-of-type
        margin-bottom 0

    &:hover
        color var(--linkColorActive)

    &__container
        display flex
        flex-direction row
        justify-content space-between

    &__icon
        line-height 0

        & svg path
            fill var(--iconFillColor)
  • URL: /components/raw/list-link/list-link.styl
  • Filesystem Path: patterns/bits/list-link/list-link.styl
  • Size: 700 Bytes

No notes defined.