Custom theme (replace with client name)

Homepage 

<!-- Error rendering component -->
<!-- TwigException: Unable to parse 'include 'partials/cards/card/card.twig' with{
                        card: post.caseStudy,
                        isHome: true
                    }' -->
<!-- Error: TwigException: Unable to parse 'include 'partials/cards/card/card.twig' with{
                        card: post.caseStudy,
                        isHome: true
                    }'
    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) -->
 
{% set is_homepage = true %}
{% extends "templates/base.twig" %}

{% block header %}
    {% include 'partials/home-page-header/home-page-header.twig' %}
{% endblock %}

{% block content %}
    <div class="home-page__content">

        {# Data CTA Section #}
        <section class="home-page__section home-page__section--data">
            <div class="home-page__section-container">
            {% include  'partials/call-to-action/call-to-action.twig' with {
                cta: post.dataFeature,
                isHome: true,
            }%}
            </div>
        </section>
        {# Impact Section #}
        <section class="home-page__section home-page__section--impact">
            <div class="home-page__impact-container">
                {% include 'partials/impact/impact.twig' with {
                    impact: post.impact
                } %}
            </div>
        </section>
        {# Services CTA Section with Featured Case Study #}
        <section class="home-page__section home-page__section--services">
            <div class="home-page__section-container">
                <div class="home-page__services-content">
                    {% include  'partials/call-to-action/call-to-action.twig' with {
                        cta: post.servicesFeature,
                        isHome: true,
                    } %}
                    {% include 'partials/cards/card/card.twig' with{
                        card: post.caseStudy,
                        isHome: true
                    } %}
                </div>
            </div>
        </section>

        {# News Listing Section #}

        <section class="home-page__section home-page__section--listing">
            {% if post.news %}
            <div class="home-page__section-container home-page__section-container--listing">
                <h2 class="home-page__section-header">News</h2>
                <div class="home-page__section-cards">
                    {% for card in post.news %}
                        {% include 'partials/cards/card/card.twig' with {
                            card: card,
                            isHome: true
                        } %}
                    {% endfor %}
                </div>
                {% include 'bits/cta-button/cta-button.twig' with {
                    background: 'dark',
                    linkText: 'View All News',
                    link: '/about/news',
                    icon: 'right-arrow'
                } %}
            </div>
            {% endif %}
            {% if post.pressReleases %}
                <div class="home-page__section-container home-page__section-container--listing">
                    <h2 class="home-page__section-header">Press Releases</h2>
                    <div class="home-page__section-cards">
                        {% for card in post.pressReleases %}
                            {% include 'partials/cards/card/card.twig' with {
                                card: card,
                                isHome: true
                            } %}
                        {% endfor %}
                    </div>
                    {% include 'bits/cta-button/cta-button.twig' with {
                        background: 'dark',
                        linkText: 'View All Press Releases',
                        link: '/about/press-release',
                        icon: 'right-arrow'
                    } %}
                </div>
            {% endif %}
        </section>

        {# Newsletter CTA Section #}
        {% if post.enableNewsletter %}
        <section class="home-page__section">
            <div class="home-page__section-container">
                {{ post.newsletter | raw }}
            </div>
        </section>
        {% endif %}

    </div>
{% endblock %}
 
/* No context defined. */
  • Content: 
    .home-page
    &__section
        &--impact
            background-Color none
            @extends $contentContainer
        &--data
            background-Color sapphire
            width 100%
        &--services
            background-Color grapeDk2
            width 100%
        &--listing
            background-Color lightGrey
            width 100%

    &__section-container
    &__impact-container
        max-width 1696px

    &__section-container
        @extends $contentContainer
        fluid('padding-top', 68px, 120px)
        fluid('padding-bottom', 68px, 120px)

        &--listing
            display grid
            grid-template-columns 1fr
            grid-gap 32px
            max-width 1000px

            &:nth-of-type(1)
                fluid('padding-top', 80px, 120px)
                padding-bottom 60px

            &:nth-of-type(2)
                padding-top 0
                fluid('padding-bottom', 80px, 120px)

    &__section-header
        @extends $headline2
        font-weight 700

    &__services-content
        display grid
        padding-left 24px
        padding-right 24px
        grid-gap 48px

        +above(1000px)
            grid-template-columns 1fr 1fr
            fluid('grid-gap', 80px, 120px)

        .card
            max-width 644px

            .card-content
                display flex
                flex-direction column

                &__image
                    display none

                &__mobile-image
                    display block
                    width 100%
                    height 250px

    &__section-cards
        display grid
        grid-template-columns 1fr
        grid-gap 32px
  • URL: /components/raw/homepage/home.styl
  • Filesystem Path: patterns/pages/home/home.styl
  • Size: 1.7 KB

No notes defined.