Telefonica
Card Ecosystem Evolution
[!NOTE] Old cards will be deprecated. We want to revamp cards to make all the cards more consistency between them.
Key new features:
- Multicolor backgrounds
- Props standarizations ("same props" for all cards (with sense))
- Include Footer in cards
- Slot alignment
- https://github.com/Telefonica/mistica-design/issues/2061 (this one can be done separately)
https://www.figma.com/design/V93g5UZAbzFbjF6X6YFlXa/Footer-examples?node-id=111-278&t=3UvV74oWpNEN41iA-1
Discussed in https://github.com/Telefonica/mistica-design/discussions/2018
Originally posted by annefranca January 14, 2025
Goal
Discutir e avaliar a proposta para aplicação do asset para SVA na parte inferior dos Cards.
Context
Atualmente usamos o Display Media Card e o Poster Card quando queremos ofertar um serviço ou produto para pessoa usuária. As marcas da Vivo e algumas de parceiros, como: Amazon Prime, quando aplicadas como um asset no canto superior esquerdo, apresentam baixa legibilidade, especialmente em tamanhos menores e em fundos mais complexos. Nossa proposta é que a aplicação da marca seja feita na parte inferior dos Cards ocupando 100% da largura podendo receber até 3 marcas.
Impact
Aplicando essa evolução nos Cards, vamos conseguir dar mais ênfase para marcas próprias e dos nossos parceiros, além de consistência e legibilidade, o que impacta diretamente em Acessibilidade.
Discussion Questions
- Essa é uma evolução possível dentro do Display Media Card e do Poster Card ou vocês acreditam que seria necessário a criação de um novo Card para suprir essa necessidade?
Additional considerations
Esses componentes são aplicados tanto em jornadas no CMS (framework Novum) quanto no framework Brasil, por isso a solução não pode ser feita na Vivo Extended e nem apenas dentro da Novum Extended do CMS.
Do you have a visual proposal?
https://www.figma.com/design/glVZhmK940bHHSMhtyvFPf/Display-Media-Card-e-Poster-Card?node-id=4701-112&t=nqmwLIwLPhhNdDQ6-1
Figma changelog
Card variants
- Snap Card variants will be now Data Dard “size = snap”, Display Data Card will be included as Data Card “size = display”
- Poster Card will be renamed as cover card, Display Media Card will be included as Cover Card “size = display”
- Naked Small cards will be included as Naked card “size = snap”
Assets
- [Breaking] Asset in data cards no longer uses circle primitive, now uses former media card asset
- [Breaking] Asset in displayDataCard no longer uses the _resources/Data_asset, now uses media asset
- Asset in snapCard no longer uses _resources/SnapCard_asset, some of the variants have been moved to mediaCard asset to avoid breaking
- [Breaking] Image variant of the media asset will be deprecated since is not using the image component internally, the snapCard Variants for image now are the default of the resource.
Default elements
- [Breaking] Tag in data card display is success by default, now changed to promo
- [Breaking] Subtitle is a default element in data card, now is hidden by default
- [Breaking] Pretitle is a default element in media card, display media, poster and naked cards now is hidden by default
Actions
- [Breaking] Snap card now has actions by default
- [Breaking] Highlighted card will no longer have variants per action, now uses the variants of the button group, Highlighted Card action property “secondary” and “link” values will be deprecated, “primary” value will be included as Media Card variants
- Action labels in Highlighted card and Display data card will be overrided
Other
- [Breaking] Since now the top actions can be at the same time as media, the media type variants will be deprecated, there’s a boolean that allow to show video controls
- [Breaking] Circular image variant in naked cards will be deprecated, the image type property should be used instead
- [Breaking] “Dismissable” property of highlighted card is no longer available, use card “Top Actions” property