University of Florida College of the Arts Pattern Library

Home Work 

<div class="home-work">
    <figure class="home-work__image1">
        <img data-sal="zoom-in" src="https://picsum.photos/id/155/320/480" alt="Image-1" width="320" height="480">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="#">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </span>
            <span class="home-work__image-attribution">
                Firstname Lastname
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
    </figure>
    <figure class="home-work__image2">
        <img data-sal="zoom-in" src="https://picsum.photos/id/156/312/208" alt="Image-2" width="312" height="208">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="#">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </span>
            <span class="home-work__image-attribution">
                Firstname Lastname
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
        <div class="_line _line4"></div>
        <div class="_line _line5"></div>
    </figure>
    <figure class="home-work__image3">
        <img data-sal="zoom-in" src="https://picsum.photos/id/157/312/208" alt="Image-3" width="312" height="208">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="#">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </span>
            <span class="home-work__image-attribution">
                Firstname Lastname
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
    </figure>
    <figure class="home-work__image4">
        <img data-sal="zoom-in" src="https://picsum.photos/id/158/320/480" alt="Image-4" width="320" height="480">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="#">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </span>
            <span class="home-work__image-attribution">
                Firstname Lastname
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
    </figure>
    <figure class="home-work__image5">
        <img data-sal="zoom-in" src="https://picsum.photos/id/159/480/320" alt="Image-5" width="480" height="320">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="#">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </span>
            <span class="home-work__image-attribution">
                Firstname Lastname
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
        <div class="_line _line4"></div>
    </figure>
    <figure class="home-work__image6">
        <img data-sal="zoom-in" src="https://picsum.photos/id/160/312/208" alt="Image-6" width="312" height="208">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="#">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </a>
            </span>
            <span class="home-work__image-attribution">
                Firstname Lastname
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
    </figure>
    <div class="home-work__content">
        <p class="home-work__description">
            How can art transform our everyday lives? That’s the question that inspires our work. Through wellness, technology, performance, or design - it’s all here for you. Pursue what drives you.
        </p>
        <div class="home-work__cta">

            <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--secondary">
                <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See Our Work</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                    <rect width="24" height="24" fill="#D9D9D9" />
                                </mask>
                                <g mask="url(#mask0_5509_8875)">
                                    <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
                                </g>
                            </svg></span></span></div>
            </a>
        </div>
    </div>
</div>
 
{{ enqueue_script('sal') }}
<div class="home-work">
    <figure class="home-work__image1">
        <img data-sal="zoom-in" src="{{ fields.image1.image.src | resize(320, 480) | towebp }}" alt="{{ fields.image1.image.alt }}" width="320" height="480">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="{{ fields.image1.url }}">
                    {{ fields.image1.title }}
                </a>
            </span>
            <span class="home-work__image-attribution">
                {{ fields.image1.attribution }}
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
    </figure>
    <figure class="home-work__image2">
        <img data-sal="zoom-in" src="{{ fields.image2.image.src | resize(312, 208) | towebp }}" alt="{{ fields.image2.image.alt }}" width="312" height="208">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="{{ fields.image2.url }}">
                    {{ fields.image2.title }}
                </a>
            </span>
            <span class="home-work__image-attribution">
                {{ fields.image2.attribution }}
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
        <div class="_line _line4"></div>
        <div class="_line _line5"></div>
    </figure>
    <figure class="home-work__image3">
        <img data-sal="zoom-in"  src="{{ fields.image3.image.src | resize(312, 208) | towebp }}" alt="{{ fields.image3.image.alt }}" width="312" height="208">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="{{ fields.image3.url }}">
                    {{ fields.image3.title }}
                </a>
            </span>
            <span class="home-work__image-attribution">
                {{ fields.image3.attribution }}
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
    </figure>
    <figure class="home-work__image4">
        <img data-sal="zoom-in"  src="{{ fields.image4.image.src | resize(320, 480) | towebp }}" alt="{{ fields.image4.image.alt }}" width="320" height="480">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="{{ fields.image4.url }}">
                    {{ fields.image4.title }}
                </a>
            </span>
            <span class="home-work__image-attribution">
                {{ fields.image4.attribution }}
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
    </figure>
    <figure class="home-work__image5">
        <img data-sal="zoom-in" src="{{ fields.image5.image.src | resize(480, 320) | towebp }}" alt="{{ fields.image5.image.alt }}" width="480" height="320">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="{{ fields.image5.url }}">
                    {{ fields.image5.title }}
                </a>
            </span>
            <span class="home-work__image-attribution">
                {{ fields.image5.attribution }}
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
        <div class="_line _line3"></div>
        <div class="_line _line4"></div>
    </figure>
    <figure class="home-work__image6">
        <img  data-sal="zoom-in" src="{{ fields.image6.image.src | resize(312, 208) | towebp }}" alt="{{ fields.image6.image.alt }}" width="312" height="208">
        <figcaption class="home-work__image-caption">
            <span class="home-work__image-title">
                <a class="home-work__link" href="{{ fields.image6.url }}">
                    {{ fields.image6.title }}
                </a>
            </span>
            <span class="home-work__image-attribution">
                {{ fields.image6.attribution }}
            </span>
        </figcaption>
        <div class="_line _line1"></div>
        <div class="_line _line2"></div>
    </figure>
    <div class="home-work__content">
        <p class="home-work__description">
            {{ fields.description }}
        </p>
        <div class="home-work__cta">
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: fields.ctaText,
                    type: 'secondary',
                    url: fields.ctaUrl,
                },
                background: 'light'
            }%}
        </div>
    </div>
</div>
 
{
  "title": "Homepage Work section",
  "fields": {
    "ctaText": "See Our Work",
    "ctaUrl": "#",
    "description": "How can art transform our everyday lives? That’s the question that inspires our work. Through wellness, technology, performance, or design - it’s all here for you. Pursue what drives you.",
    "image1": {
      "image": {
        "src": "https://picsum.photos/id/155/320/480",
        "alt": "Image-1"
      },
      "url": "#",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "attribution": "Firstname Lastname"
    },
    "image2": {
      "image": {
        "src": "https://picsum.photos/id/156/312/208",
        "alt": "Image-2"
      },
      "url": "#",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "attribution": "Firstname Lastname"
    },
    "image3": {
      "image": {
        "src": "https://picsum.photos/id/157/312/208",
        "alt": "Image-3"
      },
      "url": "#",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "attribution": "Firstname Lastname"
    },
    "image4": {
      "image": {
        "src": "https://picsum.photos/id/158/320/480",
        "alt": "Image-4"
      },
      "url": "#",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "attribution": "Firstname Lastname"
    },
    "image5": {
      "image": {
        "src": "https://picsum.photos/id/159/480/320",
        "alt": "Image-5"
      },
      "url": "#",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "attribution": "Firstname Lastname"
    },
    "image6": {
      "image": {
        "src": "https://picsum.photos/id/160/312/208",
        "alt": "Image-6"
      },
      "url": "#",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "attribution": "Firstname Lastname"
    }
  }
}
  • Content: 
    .home-work
    align-items center
    display flex
    flex-direction column
    gap 32px

    &__content
        grid-area content
        max-width 460px
        text-align center

    &__description
        @extends $bodyLarge
        color blue500

    &__cta
        fluid(margin-top, 16px, 32px)
        text-align center

    &__image-title
        @extends $headline5
        color blue500
        display block

    &__image-attribution
        @extends $detail
        display block

    & figure
        position relative
        & ._line
            position absolute
            width 2px
            background-color beige
            @media (prefers-reduced-motion: no-preference)
                animation bounce 2s infinite ease-in-out
            &:nth-child(2n)
                animation-delay 1s
        & figcaption
            margin-top 8px
        & img
            border-radius 8px

        & a
            text-decoration none
            &:after
                content ""
                inset 0
                position absolute
                z-index 1

        &:not(:first-child)
            display none

    &__image1
        grid-area image1
        max-width 320px
        position relative
        img
        figcaption
            max-width 320px
        ._line1
            top 24px
            left -142px
            height 108px
        ._line2
            bottom 12px
            right -134px
            height 108px
        ._line3
            bottom 52px
            right -152px
            height 64px

    &__image2
        grid-area image2
        max-width 312px
        ._line1
            top -48px
            left -98px
            height 108px
        ._line2
            top -88px
            left -80px
            height 108px
        ._line3
            bottom -58px
            right 112px
            height 56px
            width 4px !important
        ._line4
            top 124px
            right -78px
            height 164px
            width 4px !important
        ._line5
            top 152px
            right -98px
            height 108px

    &__image3
        grid-area image3
        max-width 312px
        ._line1
            top -112px
            left -46px
            height 64px
        ._line2
            top -128px
            left -16px
            height 72px
            width 4px !important
        ._line3
            bottom -24px
            right -24px
            height 64px

    &__image4
        grid-area image4
        max-width 320px
        ._line1
            top 382px
            left -28px
            height 72px
            width 4px !important
        ._line2
            top 24px
            right -18px
            height 108px
        ._line3
            top 48px
            right -34px
            height 56px

    &__image5
        grid-area image5
        max-width 480px
        ._line1
            top 142px
            left -166px
            height 72px
        ._line2
            top 16px
            left -148px
            height 162px
            width 4px !important
        ._line3
            top 206px
            right -128px
            height 64px
        ._line4
            top 230px
            right -148px
            height 162px
            width 4px !important

    &__image6
        grid-area image6
        max-width 312px
        ._line1
            top -112px
            right -6px
            height 54px
            width 4px !important
        ._line2
            top -84px
            right -26px
            height 108px


+above(1000px)
    .home-work
        align-items center
        display grid
        gap 32px
        grid-template-areas: \
            "image1 image1 image1 image2 image2 image2"\
            "image3 image3 content content image4 image4"\
            "image5 image5 image5 image5 image6 image6";
        justify-items center
        padding 16px

    .home-work.home-work figure
        display block
        transition 0.2s ease-in
        & img
            transition 0.2s ease-in
            box-shadow 0px 8px 16px 0px rgba(0, 0, 0, 0.20)
        & figcaption
            opacity 0
            transition 0.2s ease-in

    .home-work figure:has(.home-work__link:focus)
    .home-work figure:has(.home-work__link:hover)
        & img
            transform scale(1.03) translateY(-8px)
        & figcaption
            opacity 1

@keyframes bounce
    0%
        transform translateY(0)
    50%
        transform translateY(-24px)
    100%
        transform translateY(0)
  • URL: /components/raw/home-work/home-work.styl
  • Filesystem Path: patterns/partials/home-work/home-work.styl
  • Size: 4.6 KB

No notes defined.