Cards
Read about our dashboard design system and its visual components.
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
Contact support bot transactions over $100
Allow
Challenge new devices
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
App ID
Use this when integrating Castle.js.
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.
Your policy has been successfully activated.
There was an error with your request, please try again.
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.
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.