Card Details

A Card can contain many different types of data. Building out multiple classes to handle all the use cases is not maintainable. A better solution is to build a few utility classes for spacing, colors and layout.

Card Spacing Example

Welcome to a card which only contains text. The spacing is rendered using the class .linq-card__space. The space class is a utility to provide common spacing for any details inside of the card body.

Card Key Value List

The example below is rendered using .linq-key-value-list. The key value list class has nothing to do with the card and can be used anywhere. The list uses flexbox and will display overflow items under each other to support multiple viewport sizes.

Card Spacing Example

Key One
Value One
Key Two
Value Two
Key Three
Value Three
Key with long verbiage which might overflow
Short Value
Short Key
Value with long verbiage which might overflow
Key with long verbiage which might overflow
Value with long verbiage which might overflow

Card with Actions

Card actions is a utility class which creates space and aligns buttons. A div element is required to align the button actions. A single div will align all items on the right. Two div elements will align the first items on the left and the second elements on the right.

I take action!

A card using the .linq-card__actions class.

Multiple types of actions

A card using the .linq-card__actions class and two div child elements.