Sharp.com DSM

Untitled

Design

Specs

For spec details, please refer to the below Figma link.

https://www.figma.com/file/uOoMv97WUyfY6vRzGau4sw/Design-System?node-id=1293%3A15210&t=4B19O1HHfDf0c6SF-4

Purpose

The Bio block is used to display a list of people. It is used in Sharp Health News to display author information, but can also be used in an unstructured page to group a list of people together.

Usage

<aside> ✅ DO

</aside>

<aside> 🚫 DON’T

</aside>

Acceptance Criteria

  1. Content mapping

    Component field Content type field
    Image Image
    Header Name
    Subhead Job title
    Description Summary

  2. Image circle displays from “Image” field from Person content type

  3. Header displays from “Name” field from Person content type

  4. Subheader displays from “Job title” field from Person content type

  5. Description displays from “Summary” field from Person content type

  6. Accessibility

    1. Content
      1. All images have alt text that describe the content of the image

  7. Style

    1. For spec details on bio styling, please refer to this specs document.