Content topic
Content
Cards, grouped lists with tinted glyph tiles, accordions, key-value cards, a card swiper, a photo pager, avatars, star ratings and score bars.
Classes
- SheenAccordion Content
- A question that opens to its answer: a card with the title and a chevron; a tap reveals child below.
- SheenAvatar Content
- A person's picture in a circle: the image when it loads, else their initials on a tint chosen by their name (always the same tint for the same name), else a person glyph.
- SheenCard Content
- A card: SheenColors.surface with 24-point corners and, in light, a soft two-layer shadow. Inside a sheet (SheenNested) it takes SheenColors.surfaceMuted and no shadow. It clips its child to its corners.
- SheenCardSwiper Content
- One card at a time from a list, changed by a sideways swipe: the next card slides in from the end of the line.
- SheenImagePlaceholder Content
- A stand-in for a missing photo: a soft gradient with a glyph and an optional label.
- SheenKeyValue Content
- One row of a SheenKeyValueCard.
- SheenKeyValueCard Content
- A card of label and value rows with hairlines between them, such as a booking's details or a receipt.
- SheenListGroup Content
- Inset grouped rows, as in iOS Settings: one rounded group with hairline separators between the rows.
- SheenListRow Content
- One row of a SheenListGroup: an optional 30-point glyph tile in iconColor, the title with an optional subtitle under it, an optional value, then trailing (a switch) or, for a tappable row, a chevron that mirrors in right-to-left text. At least 50 points high.
- SheenPagerDots Content
- Page dots over a photo: 6-point dots at half white, the current one a 16-point white pill. At most five dots show; with more pages the window follows the current page.
- SheenPhotoPager Content
- Swipeable photos with page dots at the bottom (dots only when there is more than one photo).
- SheenSaveButton Content
- A save (heart) button for photos: a clear glass circle with a white heart, filled once saved; size points across with a 44-point hit area. Off a photo (onPhoto false) the heart takes the text colour.
- SheenScoreBar Content
- A sub-score: the label and value on one line and a 6-point bar below it, filled to fraction.
- SheenStarRating Content
- A star class: count filled stars in the rating colour, read as one label.