Component Request - BlockContact - 1hrs

[drewbaker]

Component Description

This component is used on the contact page to display team contact details. It changes color and rotates the images on hover.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://xd.adobe.com/view/c0d9243f-2f1f-4b20-614b-bef83eff7c19-b6e8/screen/6eda68b8-f4d2-4efd-b9d9-61c11a4ce4e5/specs/
• Mobile: https://xd.adobe.com/view/dd5e5638-85b6-40a8-4caa-797e6dbe406a-ab6f/screen/328ee22a-2ecc-4246-8d5c-db81679b9032/specs/

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

Email drew@funkhaus.us for the design password.

Props

props: {
    name: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },    
    email: {
        type: String,
        default: ""
    }
}

Developer Tips

List any developer tips here

1. --color-red for the font color
2. --color-pink for the hover state
3. The whole block should be an <a> tag with mailto:${this.email} as the href

Events

Should open a new email on click

Required components

The SVGs should be a kebab-case of the name prepending with animal-${_kebabCase(this.name)}.svg.

SVG's are here: https://www.dropbox.com/sh/j5ddp8f4w8l3ii3/AAAZ1BC1JIgUBC2IKikh9xD2a?dl=0

Time & Budget

Time estimate: 1hrs
Budget: $100

Screenshots