TB: New callout card with wrap-around ribbon
marshjr opened this issue · comments
Problem Statement
- As a _ , I would like to _ , so that I can _
Recommendation
- Description of the proposed solution
Design intent
(This space is intentionally left blank. The motivation and design intent go here.)
Designs
Acceptance criteria
This section is intentionally left blank. See story writing process.
User stories
(This section is intentionally left blank. User stories and acceptance criteria go here.)
Example:
Scenario: Displaying the component
Given text is provided
Then the text is displayed as a child
And the text size matches core-text medium
Out of scope
(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)
Meta
- Willing to design solution: Yes/No
- Willing to develop solution: Yes/No
- Has workaround: Yes/No
- Do any similar components already exist in TDS (core or community): Yes/No
- Does this pattern exist already but isn’t a community component? (include url)
- Which teams/applications do you think would use this improvement?
- High impact: Yes/No
Meeting notes:
- enhance to ribbon as an alternative
- current purple ribbon is only for promotions; not visually integrated with cards and plans
- not necessarily an offer, but used for a visual call out
- brand messaging call out
- is colour enough to indicate that it's different
- this will be more of a marketing piece
- wrap around purple is still for promo
- would be considered a net new component that has built in anchoring on position
- negative margins to hug card? yes it sits on top
- new wrap around ribbon/ separate component vs. ribbon wrap and card(TBD)
- Basic card with wrap around ribbon (green) = Text is a heading
- Selectable card with ribbon (purple) = Text is not a heading, can be
Action items:
- determine a character count for wrap ribbons (someone from content)
- will need to be included in the visual indicators here and create usage guidelines for this variation after consolidating
- considerations for tabbing sequence; eyebrow or heading? (@Stu-Brown)
- consider heading levels or jaws for the content within wrap around ribbon (@Stu-Brown)
hey @Stu-Brown any updates on the action items above?
exploration for ribbons can be found here: #275
