Sign In


Our Card Styles and Usage


Cards are a great pattern for grouping like content into a visual container. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. They should remain identifiable as a single contained unit. They cannot merge with another card. Nor can they be broken up into multiple cards. They can, however be surrounded by supportive content. Or they can stand alone, not relying on any surrounding content.

Card Names

We leverage a handful of different card patterns and to simplifier communications we use the following names to refer to different types of cards


This is our default card style and the most flexible, it has multiple variations

Image Card

This is often referred to as a media card. It is a variation on the basic card that involves using imagery for either the background or the header

Horizontal Card

This is card is usually used in lists and often leverages avatars as part of their design patterns

List Card

List Cards are great for displaying information in a list format.

Form Card

Form cards have forms embedded in the supporting content section.

Product Card

This is a rich interative card that showcases our products but can be used in other patterns as well.

Basic Cards

Cards are molecular components that can be employed inside larger organisms (see our List Widgets and Product Cards, for examples). They also can be used on their own to compartmentalize content of a particular focus.

A basic card consists of a container bordering a title element above some supportive content. Supporting content can contain text, links, calls to actions, etc.

Style Properties
Background Color Box Shadow Border Radius Border Style Padding
White (#ffffff) 0 1px 2px 0 rgba(0, 0, 0, 0.2) 4px 1px solid rgba(0,0,0,.125); 30px
  1. Alignment

    Card content can be left aligned or center aligned but never right aligned.

  2. Avatars

    For center aligned cards an avatar can be added for visual support.

  3. Title

    Not All basic cards require a title but if used, make sure the title is short but descriptive.

  4. Horizontal Rule

    If a basic card contains a title we always use a horizontal rule to divide the title from the supportive content.

  5. Supportive content

    The content area of a card can take many shapes. The only rule for card content is that it is related to the title if applicable.

basic card anatomy
Beeline Manager

Beeline Manager is great way to manage all of your contingent workforce needs from your mobile device.

Learn More
Cost Savings

Eliminate rogue spending. Consolidate suppliers. Benchmark rates.

John Doe
Jacksonville Fl,

Structural Engineer

Image Cards

Image cards are for rich media content, usually in the form of an image with supporting text or calls to action.

  1. Layouts

    Image cards come in two layouts. The image top places the image in the header of the card, and the image full has the image scale the entire width and height of the card.
    It should be noted that there should no border around the image. The image should stretch vertically and horizontally to the edges of it’s container.

  2. Titles

    Image cards have an optional title, however with image cards we do not use a horizontal rule.

  3. Content

    Content is always placed at the bottom of the card. When using an image full card, per our image overlays guidelines, the content must be readable.

card image anatomy
product manager logo
Beeline Manager

Beeline Manager is great way to manage all of your contingent workforce needs from your mobile device.

Learn More
Operational Efficiency

Automate procurement cycles. Reduce time to fill positions.

Horizontal Cards

Horizontal cards are great for lists, dashboard widgets, stat charts and many other applicable content. They are often clickable and can be used to trigger events. If they are clickable they have a distinct hover state which you can see in the examples below.

  1. Avatar

    Avatars are optional but can be used to add more visual context to the card content. They are placed to the left of the title and content sections. As the content area grows vertically the avatar should remain positioned at the top of it’s container, not centered or at the bottom.

  2. Title

    For horizontal cards titles are required but we do not require a horizontal rule to seperate the title from the content.

  3. Content

    Content is placed below the title. There is no limit to how much the content can grow vertically, and also, the content should be left aligned with the title even when it wraps.

horizontal card anatomy
Did you Know?

Find out how companies are using brand-enabled, AI-powered, self-sourcing capabilities to build private talent pools of previously identified talent with TalentNet technology seamlessly integrated to Beeline VMS.

John Doe

Systems Architect
Jacksonville Fl, 904-555-5555

List Cards

List cards are a great way to showcase items that need to be ordered in a list. They are a combination of a basic card with list cards as the content. We often use them for dashboard widgets but they are very flexible and can have many uses.

  1. Title

    All list cards require a title, this allows the user to know what the purpose of the list is.

  2. List Content

    The content area is made up of list items that follow the same structure as a horizontal card without the rounded corners and drop-shadow. If the items are clickable on hover we display the rounded corners and dropshadow. We also change the cursor to a pointer. This indicates to the user that the item is clickable and can be interacted with.

  3. Call To Actions

    Call to actions are optional. They are placed below the content and left aligned with the content to allow the user to track the content from top to bottom.

  4. Context Menu

    Context menus can be added to a List Card for times when a card can have hidden actions such as delete, export, or copy. They are located in the top right corner of the card and use an ellipsis icon.

list widget anatomy
New Resumes Recieved

3 new resumes to view

Assignments Expired

5 assignments have expired

Positions Ready for Release

3 positions ready

Position Requests Ready to Edit

2 position requests

Form Cards

Cards can contain forms for user input. The general rule is keep the final call to action left aligned with the form. This ensures that even if the card grows horizontally the button will be inline with the user’s eye tracking as they work down the form.
Link Another Account

Product Cards

We use product cards to showcase our services and VMS instance from the Beeline One Launchpad. It’s a good example of how versatile the cards are for delivering like content.

EagleWave logo

Eagle Wave VMS