Homepage Focus section

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="home-focus">
    <div class="home-focus__title-and-cta">
        <div class="home-focus__title">
            <h2 class="home-focus__title-text" id="Find your focus">
                Find your focus
            </h2>
            <p class="home-focus__description">
                Discover how our unique programs and units can help you meet your educational and artistic goals.
        </div>
        <div class="home-focus__cta-container">

            <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary">
                <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Explore Programs</span><span class="standard-button__underline"></span></span></div>
            </a>
        </div>
    </div>
    <div class="home-focus__content">
        <div class="home-focus__list">
            <details class="home-focus__item" data-focus-selector="1">
                <summary class="home-focus__list-item-title">
                    Center for Arts in Medicine
                </summary>
                <div class="home-focus__list-item-text">
                    <p><strong>Sed auctor, nunc nec ultricies ultricies, nunc.</strong></p>
                    <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc.</p>
                </div>
                <div class="home-focus__list-item-cta">

                    <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary" aria-label="Learn more about Center for Arts in Medicine">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__underline"></span></span></div>
                    </a>
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="holder.js/640x426?auto=yes&theme=lava&text=Center for Arts in Medicine" alt="alt text">
            </details>
            <details class="home-focus__item" data-focus-selector="2">
                <summary class="home-focus__list-item-title">
                    Center for Arts, Migration, and Entrepreneurship
                </summary>
                <div class="home-focus__list-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.
                </div>
                <div class="home-focus__list-item-cta">

                    <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary" aria-label="Learn more about Center for Arts, Migration, and Entrepreneurship">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__underline"></span></span></div>
                    </a>
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="holder.js/640x426?auto=yes&theme=vine&text=Center for Arts, Migration, and Entrepreneurship" alt="alt text">
            </details>
            <details class="home-focus__item" data-focus-selector="3">
                <summary class="home-focus__list-item-title">
                    Digital Worlds Institute
                </summary>
                <div class="home-focus__list-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.
                </div>
                <div class="home-focus__list-item-cta">

                    <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary" aria-label="Learn more about Digital Worlds Institute">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__underline"></span></span></div>
                    </a>
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="holder.js/640x426?auto=yes&theme=sky&text=Digital Worlds Institute" alt="alt text">
            </details>
            <details class="home-focus__item" data-focus-selector="4">
                <summary class="home-focus__list-item-title">
                    School of Art + Art History
                </summary>
                <div class="home-focus__list-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.
                </div>
                <div class="home-focus__list-item-cta">

                    <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary" aria-label="Learn more about School of Art + Art History">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__underline"></span></span></div>
                    </a>
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="holder.js/640x426?auto=yes&theme=industrial&text=School of Art + Art History" alt="alt text">
            </details>
            <details class="home-focus__item" data-focus-selector="5">
                <summary class="home-focus__list-item-title">
                    School or Music
                </summary>
                <div class="home-focus__list-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.
                </div>
                <div class="home-focus__list-item-cta">

                    <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary" aria-label="Learn more about School or Music">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__underline"></span></span></div>
                    </a>
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="holder.js/640x426?auto=yes&theme=industrial&text=School of Music" alt="alt text">
            </details>
            <details class="home-focus__item" data-focus-selector="6">
                <summary class="home-focus__list-item-title">
                    School of Theatre + Dance
                </summary>
                <div class="home-focus__list-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.
                </div>
                <div class="home-focus__list-item-cta">

                    <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary" aria-label="Learn more about School of Theatre + Dance">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__underline"></span></span></div>
                    </a>
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="holder.js/640x426?auto=yes&theme=social&text=School of Theatre + Dance" alt="alt text">
            </details>
        </div>
        <div class="home-focus__images" aria-hidden="true">
            <div class="home-focus__images-item" data-focus-image="6">
                <img width="640" height="426" src="holder.js/640x426?auto=yes&theme=social&text=School of Theatre + Dance" alt="alt text">
            </div>
            <div class="home-focus__images-item" data-focus-image="5">
                <img width="640" height="426" src="holder.js/640x426?auto=yes&theme=industrial&text=School of Music" alt="alt text">
            </div>
            <div class="home-focus__images-item" data-focus-image="4">
                <img width="640" height="426" src="holder.js/640x426?auto=yes&theme=industrial&text=School of Art + Art History" alt="alt text">
            </div>
            <div class="home-focus__images-item" data-focus-image="3">
                <img width="640" height="426" src="holder.js/640x426?auto=yes&theme=sky&text=Digital Worlds Institute" alt="alt text">
            </div>
            <div class="home-focus__images-item" data-focus-image="2">
                <img width="640" height="426" src="holder.js/640x426?auto=yes&theme=vine&text=Center for Arts, Migration, and Entrepreneurship" alt="alt text">
            </div>
            <div class="home-focus__images-item" data-focus-image="1">
                <img width="640" height="426" src="holder.js/640x426?auto=yes&theme=lava&text=Center for Arts in Medicine" alt="alt text">
            </div>
        </div>
    </div>

</div>


        {{ enqueue_script('focus-chooser') }}
<div class="home-focus">
    <div class="home-focus__title-and-cta">
        <div class="home-focus__title">
            <h2
                class="home-focus__title-text"
                id="{{ fields.title|sanitize }}">
                {{ fields.title }}
            </h2>
            <p class="home-focus__description">
                {{ fields.description }}
        </div>
            <div class="home-focus__cta-container">
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        text: fields.linkText,
                        type: 'tertiary',
                        url: fields.linkUrl,
                    },
                    background: 'light'
                } %}
            </div>
    </div>
    <div class="home-focus__content">
        <div class="home-focus__list">
        {% for item in fields.items %}
            <details class="home-focus__item" data-focus-selector="{{ loop.index }}">
                <summary class="home-focus__list-item-title">
                    {{ item.title }}
                </summary>
                <div class="home-focus__list-item-text">
                    {{ item.content }}
                </div>
                <div class="home-focus__list-item-cta">
                    {% set linkText = 'Learn more about ' ~ item.title %}
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            text: 'Learn more',
                            type: 'tertiary',
                            url: item.linkUrl,
                            size: 'sm',
                            accessibleLabel: linkText,
                        },
                        background: 'light'
                    } %}
                </div>
                <img class="home-focus__list-item-image" width="640" height="426" src="{{ item.image.src | resize(640, 426) | towebp }}" alt="{{ item.image.alt }}">
            </details>
        {% endfor %}
        </div>
        <div class="home-focus__images" aria-hidden="true">
        {% for item in fields.items | reverse %}
            {% set index = (loop.length - loop.index + 1) %}
                <div class="home-focus__images-item" data-focus-image="{{ index }}">
                    <img width="640" height="426" src="{{ item.image.src | resize(640, 426) | towebp }}" alt="{{ item.image.alt }}">
                </div>
        {% endfor %}
        </div>
    </div>

</div>


        
            
            {
  "fields": {
    "title": "Find your focus",
    "description": "Discover how our unique programs and units can help you meet your educational and artistic goals.",
    "linkText": "Explore Programs",
    "linkUrl": "#",
    "items": [
      {
        "title": "Center for Arts in Medicine",
        "linkText": "Learn More",
        "linkUrl": "#",
        "content": "<p><strong>Sed auctor, nunc nec ultricies ultricies, nunc.</strong></p><p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc.</p>",
        "image": {
          "src": "holder.js/640x426?auto=yes&theme=lava&text=Center for Arts in Medicine",
          "alt": "alt text"
        }
      },
      {
        "title": "Center for Arts, Migration, and Entrepreneurship",
        "linkText": "Learn More",
        "linkUrl": "#",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.",
        "image": {
          "src": "holder.js/640x426?auto=yes&theme=vine&text=Center for Arts, Migration, and Entrepreneurship",
          "alt": "alt text"
        }
      },
      {
        "title": "Digital Worlds Institute",
        "linkText": "Learn More",
        "linkUrl": "#",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.",
        "image": {
          "src": "holder.js/640x426?auto=yes&theme=sky&text=Digital Worlds Institute",
          "alt": "alt text"
        }
      },
      {
        "title": "School of Art + Art History",
        "linkText": "Learn More",
        "linkUrl": "#",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.",
        "image": {
          "src": "holder.js/640x426?auto=yes&theme=industrial&text=School of Art + Art History",
          "alt": "alt text"
        }
      },
      {
        "title": "School or Music",
        "linkText": "Learn More",
        "linkUrl": "#",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.",
        "image": {
          "src": "holder.js/640x426?auto=yes&theme=industrial&text=School of Music",
          "alt": "alt text"
        }
      },
      {
        "title": "School of Theatre + Dance",
        "linkText": "Learn More",
        "linkUrl": "#",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nunc nec ultricies ultricies, nunc nunc.",
        "image": {
          "src": "holder.js/640x426?auto=yes&theme=social&text=School of Theatre + Dance",
          "alt": "alt text"
        }
      }
    ]
  }
}

File:

Content:


                                .home-focus
    @extends $componentWithMargin
    container-type inline-size
    background-color beige
    fluid(padding-bottom, 32px, 80px)
    fluid(padding-top, 32px, 80px)
    fluid(padding-left, 24px, 48px)
    fluid(padding-right, 24px, 48px)
    border-radius 8px

    &__title-and-cta
        justify-content space-between
        flex-direction column
        gap 18px 32px
        display flex
        fluid(margin-bottom, 48px, 64px)
        @container (width > 600px)
            &
                align-items flex-end
                flex-direction row

    &__title-text
        @extends $headline2altMax
        color blue500
        margin-bottom 16px

    &__description
        @extends $bodyMedium

    &__content
        @container (width > 600px)
            &
                display grid
                grid-template-columns 3fr 5fr
                gap 24px
                justify-items center

    &__list-item-title
        @extends $headline5
        padding-bottom 24px
        padding-top 24px
        &:focus
        &:hover
            background-color darken(beige, 7%)

    &__list-item-text
        & p
            @extends .wp-block-paragraph
            margin-bottom 8px
        & ul
            @extends ul.wp-block-list
            margin-bottom 8px
            & li
                list-style initial
                &::marker
                    @extends $unorderedListBullet


    &__list-item-cta
        margin-top 16px

    &__list-item-image
        border-radius 8px
        margin-top 24px
        @container (width > 600px)
            &
                invisible()

    &__images
        display none
        grid-template-rows 1fr
        grid-template-columns 1fr
        width fit-content
        height fit-content
        margin 60px
        @container (width > 600px)
            &
                display grid

    &__images-item
        width 100%
        height 100%
        border-radius 8px
        grid-area 1 / 1
        & img
            border-radius 8px
            transition transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6)
        &:nth-child(3n + 1)
            transform translate(-48px, -36px)
            & img
                transform rotateZ(-1deg)
        &:nth-child(3n + 3)
            transform translate(0, 0) 
            & img
                transform rotateZ(1deg)
        &:nth-child(3n + 2)
            transform translate(48px, 24px) 
            & img
                transform rotateZ(-1deg)
        &[data-focus-selected]
            z-index 1
            & img
                transform rotateZ(0deg)
                transform scale(1.05)
9

URL: /components/raw/home-focus/home-focus.styl
Filesystem Path: patterns/partials/home-focus/home-focus.styl
Size: 2.6 KB

Handle: @home-focus
Preview:
- With layout
- Component only
Filesystem Path: patterns/partials/home-focus/home-focus.twig

No notes defined.