Component Request - BlockWork - 1hrs

[drewbaker]

Component Description

This component is used on the Work and Directory grid pages. It has a hover state that scales up the image, and moves the text over the image.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://xd.adobe.com/view/c0d9243f-2f1f-4b20-614b-bef83eff7c19-b6e8/screen/dfb48f87-893e-4016-82a3-db2102676b3d/
• Mobile: https://xd.adobe.com/view/dd5e5638-85b6-40a8-4caa-797e6dbe406a-ab6f/screen/e2e9fc6e-fdc6-43a7-85a3-963309b10e34/

**Note that the block will need to be alternated when used in GridWork, so best to build this with that in mind. **

Note the variant without the credit prop.

If no mobile designs provided, please use your best judgment for responsiveness.

Email drew@funkhaus.us for the design password.

Props

props: {
    image: {
        // Mock: api.images[0]
        type: Object,
        default: () => {}
    },
    title: {
        type: String,
        default: "" // "HP - Meant To Move"
    },
    credit: {
        type: String,
        default: "" // Optional
    },
    to: {
        type: String,
        default: ""
    }
}

Developer Tips

List any developer tips here

1. --color-orange for the font color

Required components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. The entire component should be in a nuxt-link
2. <split-title> for the two lines of the title
3. <wp-image> for the image

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots