Page Layout

Read about our dashboard design system and its visual components.

Version 1.0
Card based tables

There are two types of tables available to choose from. Card based tables contain table cell content that spans multipel rows or require unique visual styling. The table below is an example of a card based table taken from the threats view. Do not include too many columns to ensure correct column tightness.

  • Can have content that spans multiple rows
  • All tables are fully responsive
Date Risk Action User Info Signals Policy
Oct 15
14:58
95
Deny johan@castle.io
(Apple; iOS 12.3.2) Opera on iOS 12.3.2 		Fast Travel New Device New Browser Malicious Logins ATO
Oct 14
11:24
65
Challenge lisa@castle.io
(Apple; iOS 12.3.2) Opera on iOS 12.3.2 		Datacenter VPN Malicious Logins ATO
Oct 10
21:45
35
Allow jin@castle.io
(Windows; OS 12.3.2) Firefox on Windows 10 12.3.20.20.10.25 		New Country Malicious Logins ATO
Text based tables

Text based tables are tables that include single row text content inside table cells. The following example was taken from the debugger view within the app. When determining the responsive nature of each table, truncate the column with the most varied with ellipsis when text overflows.

  • Truncate the cell with the longest text with ellipsis
  • Do not include too many columns
Timestamp URL Event JSON
2020-10-15 14:58
/v1/authenticate
$login.succeeded
{ "properties": { "login_type": "$password" }, "context": { "client_id": false, "ip": "172.58.43.135", "user_agent": "(Apple; iOS 12.3.2) Opera/62.17 _hx0010000001", "headers": { "Accept-Language": "en-us,en;q=0.5", "Referer": "https://demo.castle.io//authenticate" } }
2020-10-15 14:58
/v1/authenticate
$login.succeeded
{ "properties": { "login_type": "$password" }, "context": { "client_id": false, "ip": "172.58.43.135", "user_agent": "(Apple; iOS 12.3.2) Opera/62.17 _hx0010000001", "headers": { "Accept-Language": "en-us,en;q=0.5", "Referer": "https://demo.castle.io//authenticate" } }
2020-10-15 14:58
/v1/authenticate
$login.succeeded
{ "properties": { "login_type": "$password" }, "context": { "client_id": false, "ip": "172.58.43.135", "user_agent": "(Apple; iOS 12.3.2) Opera/62.17 _hx0010000001", "headers": { "Accept-Language": "en-us,en;q=0.5", "Referer": "https://demo.castle.io//authenticate" } }
2020-10-15 14:58
/v1/authenticate
$registration.succeeded
{ "properties": { "login_type": "$password" }, "context": { "client_id": false, "ip": "172.58.43.135", "user_agent": "(Apple; iOS 12.3.2) Opera/62.17 _hx0010000001", "headers": { "Accept-Language": "en-us,en;q=0.5", "Referer": "https://demo.castle.io//authenticate" } }