Cards

Read about our dashboard design system and its visual components.

Version 1.0
Risk policies card

The risk policy card features multiple column of information with the larger column dedicated to the policy name and its details. To see how this card should behave at various screen sizes, adjust your browser width.

  • Verdict columns have a fixed width
  • The toggle slide is the main call to action

Challenge

ATO
Until device is approved
60 – 100

Contact support bot transactions over $100

Transactions over $100

Allow

BOT
Until device is approved
60 – 100

Challenge new devices

New locations
Generic card

The Generic cards are useful for visual grouping of content. Generic cards have header and body child elements. Header titles are capitalized and buttons and other contents are aligned to the right.

  • Header titles are short and capitalized
  • Use extra small size for header buttons
  • Apply unit scale 4 padding for interior

API Secret

pk_p2LGtWHAqgerksYEM2j89jDvsxNSiuWh

Make sure to not share it with anyone.

App ID

945913382322262

Use this when integrating Castle.js.

Notification cards

Notification cards are a great way to grab immediate attention. There are two notification card variations available to choose from. The filled option works great in places where user prompt is needed. For less obtrusive notification, use the light colored option.

  • Filled option works great for prompting users
  • For less obtrusive scenarios, use the light option
  • Ensure there is only one notification on view

Configure how to get notified when a login exceeds the specified risk threshold.

Got it

Your policy has been successfully activated.

There was an error with your request, please try again.

Empty state cards

Empty state cards are an opaque card that can be used as a placeholder to handle scenarios where there is an empty result. Empty cards can vary in vertical padding, however make sure there is enough height overall to cover at least one row of expected card content.

  • Great for handling empty results
  • Height is minimum of one row of content

Your search query returned no results, please try again.

Information cards

Unlike notification cards, information cards are useful for situations where the user needs to be guided or notified in-page unobtrusively. There are two styles of information cards available depending on the type of content or information.

  • Great for in-page guided information
  • Can support images or text only

Policies are evaluated from top to bottom. Each tracked event will fall into one policy (the first policy it matches).

How are policies prioritized?

Policies are evaluated from top to bottom. Each tracked event will fall into one policy (the first policy it matches). To learn more about policies click here.