<!-- Error rendering component -->
<!-- TwigException: Unable to parse 'include 'components/video-component/video-component.twig'
            with{
                component: {
                    'video': {
                        'src' : card.video,
                    }
                }
            }' -->
<!-- Error: TwigException: Unable to parse 'include 'components/video-component/video-component.twig'
            with{
                component: {
                    'video': {
                        'src' : card.video,
                    }
                }
            }'
    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="resource-card resource-card--{{ card.type }}">
    <div class="resource-card__meta">
        <div class="resource-card__card-type">
            <div class="resource-card__resource-icon">{% include 'bits/icons/paperclip.twig'%}</div>Resource
        </div>
        <div class="resource-card__file-type">{{ card.type }}</div>
    </div>
    <div class="resource-card__content">
        {% if card.type != 'video' %}<div class="resource-card__content-left"> {% endif %}
            <h4 class="resource-card__title">
                {{ card.title }}
            </h4>
            <div class="resource-card__description">
                {{ card.description }}
            </div>
        {% if card.type != 'video' %}</div> {% endif %}
        {% if card.type == 'video' %}
            {% include 'components/video-component/video-component.twig'
            with{
                component: {
                    'video': {
                        'src' : card.video,
                    }
                }
            }%}
        {% else %}
            <div class="resource-card__content-right">
                <div class="resource-card__image">
                    {% if card.image %}
                        {% include 'partials/image/image.twig' with {
                            'image': card.image,
                        } %}
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
    {% if card.type != 'video' %}
        <div class="resource-card__button">
            {% include 'bits/cta-button/cta-button.twig' with{
                'linkText' : card.linkText,
                'link' : card.url,
                'icon' : 'file-link',
                'background' : 'dark',
            } %}
        </div>
    {% endif %}
</div>
/* No context defined. */
  • Content:
    .resource-card
        --flexDirection row
    
        @extends $contentContainer
        padding-top contentPaddingSmall
        padding-bottom contentPaddingSmall
        border-bottom 2px rgba(20, 81, 110, 0.10) solid
    
        &--video
            --flexDirection column
    
        &__meta
        &__file-type
        &__card-type
            display flex
            align-items baseline
    
        &__meta
            flex-direction row
            font-size 16px
    
        &__card-type
            font-weight 700
            padding-right 16px
    
        &__file-type
            color #B0B0B0
            text-transform capitalize
    
        &__resource-icon
            padding-right 6px
    
        &__content
            display flex
            flex-direction column
            justify-content space-between
            padding-bottom 12px
    
            +above(850px)
                flex-direction var(--flexDirection)
                padding-bottom 24px
    
        &__content-left
            display flex
            flex-basis 100%
            flex-direction column
            justify-content stretch
    
            +above(850px)
                flex-grow 0
                flex-basis 60%
    
        &__content-right
            display flex
            flex-basis 100%
            justify-content center
    
            +above(850px)
                flex-basis 30%
                flex-grow 1
    
        &__title
            @extends $headline4
            padding-top 8px
            padding-bottom 8px
    
        &__description
            font-size 20px
            font-weight 300
            line-height 36px
            padding-bottom contentPaddingSmall
    
        &__image
            padding-bottom 8px
    
    
  • URL: /components/raw/resource-card/resource-card.styl
  • Filesystem Path: patterns/partials/resource-card/resource-card.styl
  • Size: 1.5 KB

No notes defined.