What

The design document for processed messages shows different variations for how we could show processed messages in the table, drawer, and Overview tab.

This task is to create UI POCs based on the variations provided for the drawer so that we can see how these ideas display when rendered using actual UI components from PatternFly. 

How

• Create at least one POC per variation of the processed messages card shown in the design document. 
• It might also help to include additional contents that would display in the drawer surrounding this card to assess the best design.
• Here are some suggestions for which PF components to use:
  • Card header for the "Processed messages" text
  • Card footer for the gray text below, which will likely need a utility class to apply the correct font color
  • Card body contents — this part will be tricky. Here are some options:
    • Variation 1) use PF layouts (e.g. grid) and utility classes to implement this
    • Variation 2) use some of the props illustrated in this description list example to adjust the size. This is similar to mockups in this miro board, but this would require some updates to the layout. For example the property key/value pair would be:

      Sent
      1600

      and Processed messages would still display as the card header.