apply design guidelines for use of tabs/cards to address large amounts of metadata

currently, webui views do not scale very well when it comes to displaying very large amounts of information/metadata about a file. this work should be in parallel work VD/UI team is doing on tabs.

As part of our ongoing work on "complex metadata" or "metadata at scale" Carolina has worked on some overall guidelines around the use of cards along with tabs to break out the viewing of large-scale metadata needs. For a fuller description of the work, see https://docs.google.com/document/d/1F4_ZQemWk6TDGJL5twxRX1hTP6Xj9MJc02TAtOcIi44/edit#heading=h.jojtu2zidcv6.

General Description:
Use cards with tabs to quickly navigate between views within the same context. Avoid using these cards with tabs right beneath the navigation header.

Format:
Each tab label describes the content contained within and should not use more than two words. For categories where there are errors (such as an empty required field), there should be a warning icon next to the label of that category. This is the only exception for using icons on the tabs. In no other situation should icons be used on the tabs.
In mobile and smaller screens width will impact the experience. In this scenario there will be horizontal scroll to allow navigation when the tabs can’t all be displayed on the screen.
In order to maintain an uncluttered UI and reduce cognitive load on users, it’s not recommended to have more than six tabs on the card.