Create profile component

[maxatdetroit]

Profile Component

The goal of this task is to create a new profile component in the stable build of the design system.

Mockups

The full mockups can be viewed in Figma: https://www.figma.com/design/1eNREu4goozzabiuUhXvpS/detroitmi.gov-redesign?node-id=35-2393&t=FgpYMyZiFD6ry3yt-1

The design should look identical on desktop and mobile:

The following examples are to demonstrate how the component should behave in its parent containers in different viewport scenarios.

Mobile

Desktop

Requirements

• The width of the component (and component contents) should scale with the parent container
• The image src URL should be provided as an attribute on the component.
• The name of the individual should be a named slot. The assigned element should be either a link or a span element.
• The title(s) of the individual (e.g. Sandra Yu Stahl is both "Deputy Chief Financial Officer" and "Chief Procurement Officer") should be provided as additional named slotted elements. The assigned element should be a span.
• Follow the best practices for attributes and slots described in Document best practices in contributing docs #201 , Define attribute naming conventions in contributing docs #202 , and Add contributing docs regarding named slots with basic markup #205