Dashboard - Layoutix

Layoutix /DashboardChange page type

Navigation

Left sidebarTop bar linksTop menu

Navigation fixed on the left, content on the right

Sidebar behavior

Always expandedCollapsible

The sidebar always shows icons and labels

Content width

Full widthCentered, limited width

The content fills the available width

Parts

Top bar: search, user Breadcrumb Page header Footer Right detail panel

KPI cards Chart Data table Filter bar

Sea MistWarm SandMorning BlueMintRoseLavenderSunsetForestGraphiteLemonPeachSkyWisteriaOliveCoralLagoonBerryAmberIndigoCeladonWineSlateCaramelMidnight

Current: Morning Blue Light#F3F7FC #D3E1F3 #2F6FD0 #10284A

Sharp linesAlmost square corners, thin dividing lines, no shadowBalancedMedium corners, a light shadowSoftLarge corners, a more visible soft shadowColor blocksSmall corners, no border or shadow, areas separated by background color

Light onlyOnly a light themeDark onlyOnly a dark themeLight and darkBoth are supported and the user can switch

Pick any number, or none. Hover a card to play it.

On load

Page fade inContent fades in from transparent on load

List items in sequenceList items fade in one after another

Sidebar slideThe sidebar slides in smoothly from the left

Chart bars grow in turnEach bar of the chart grows up from the bottom in turn

Loading skeletonGrey placeholder blocks with a sweeping light while data loads

On hover or press

Card lifts on hoverCards rise slightly when the pointer is over them

Button

Button press feedbackThe button shrinks slightly when pressed

1280px wide

Chosen motion:Page fade inButton press feedback