search

NCIOCPL / ncids

NCI Design System
10 stars 5 forks source link

Build: Feature Cards - D. Thumbnail Card Optional Description #599

Closed blilianyu closed 2 months ago

blilianyu commented 2 years ago

Build Thumbnail Card - Optional Description variation of Feature Card component based on design specs/requirements documented in this ticket

ESTIMATE TBD

Styling:

Anatomy of a component

Behaviors

InVision:

Acceptance Criteria for Behaviors

If a component changes between breakpoints, or things show/hide, that gets captured here 

As a user, I would like to see a Thumbnail card row, so that I can quickly scan the promo content. 

Scenario: User views a page with a thumbnail card row on Widescreen or Desktop  
Given a user is viewing a landing page with a thumbnail card row 
  And the browser width is 1400px or less
Then a thumbnail card row will appear 
Then the title of the thumbnail card row will appear and should theme token 2XL
  And the 1:1 crop of the image associated with the feature card should appear (following our image rules)  
  And clicking on the image will take the user to the corresponding page
  And the title of the feature card should be font size theme token MD
  And the optional description will appear 
  And the button will appear with the secondary button style
  And on hover, the buttons will appear with the secondary button hover style 
  And clicking on the button will take the user to the corresponding page 

Scenario: User views a page with a thumbnail card row on Tablet Large
Given a user is viewing a landing page with a thumbnail card row 
  And the browser width is 880px or less
Then the thumbnail card row will stack 
Then the title of the thumbnail card row will appear and should theme token XL
  And the 1:1 crop of the image will appear
  And clicking on the image will take the user to the corresponding page
  And the title of the thumbnail card should be font size theme token MD
  And the optional description will appear 
  And the button will appear with the secondary button style
  And on hover, the buttons will appear with the secondary button hover style 
  And clicking on the button will take the user to the corresponding page 

Scenario: User views a page with a feature card row on Tablet, Mobile Large or Mobile
Given a user is viewing a landing page with a feature card row 
  And the browser width is 640px or less
Then the thumbnail card row will stack 
  And the image will not appear
  And the title of the thumbnail card should be font size theme token MD
  And the optional description will appear 
  And the button will appear with the secondary button style
  And on hover, the buttons will appear with the secondary button hover style 
  And clicking on the button will take the user to the corresponding page 
  And the container shadow will not appear

Scenarios

Card 1 w/ Description

Card 2 w/ Description

Card 1 w/o Description

Card 2 w/o Description

Solution

Prerequisites

Tasks

blilianyu commented 1 year ago

Thumbnail Card

When to use Thumbnail Card) variation

When to consider something else

sarinapadilla commented 2 months ago

Closing this, as we aren't building this component for Home and Landing pages.