Component Request - SectionReps - 2hrs

[drewbaker]

Component Description

This component is used on the Contact page to give contact information.

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.

Note that the component is the RED part, you do not need to add the black that is at top of component.

Props

region = {
     title: "West",
     text: "Resource LA/nOffice – 212 343 8085",
     people: {name: "Dana Balkin", email: "example@example.com"}
}

props: {
    regions: {
        type: Array,
        default: () => [{...region}, {...region}, {...region}]
    },
    title: {
          type: String,
          default: "Representation"
    }
}

Developer Tips

List any developer tips here

1. --color-red for the text color
2. I'd position: absolute the awards title out from the top of the section.
3. Use <section> tag for outer markup. Awards should be a h2 tag.
4. Probably use flex-box for the layout of this. Illustration is probably last flex-item.
5. Note the Funkhaus logo at bottom. That should be <a> that links to https://funkhaus.us target _blank.

Required components

SVG for illustration can be found here: https://www.dropbox.com/sh/j5ddp8f4w8l3ii3/AAAZ1BC1JIgUBC2IKikh9xD2a?dl=0

Time & Budget

Time estimate: 2hrs
Budget: $200

Screenshots