TB: New callout card with wrap-around ribbon

[marshjr]

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

[Christina-Lo]

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)

[varunj90]

hey @Stu-Brown any updates on the action items above?

[varunj90]

exploration for ribbons can be found here: https://github.com/telus/tds-community/issues/275

[Stu-Brown]

@varunj90 I connected with Gary yesterday about this and other TB TDS tickets. With the additional ribbon/visual indicator consolidation work happening on ticket 275, both this ticket and 269 will be on hold pending the outcome of that exercise.