LUCI Design System
These Kitchen Sink pages are test pages created in order to preview components without any possible documentation site style collisions.
List Groups Sink
Default
List Heading
List item 1 Link
List item 2 Link Hover
List item 3 Link Focus
List item 4 Link Selected
List item 5 Disabled
List item 6 Link
Nested List item 1
Nested List item 2
List item 3 Link Hover
List item 4 Link Focus
Nested List item 5 Selected
Nested List item 6 with long text label to demonstrate wrapping lines.
List item 7 Static
List item 8 with long text label to demonstrate wrapping lines.
Default in Narrow Container
List Heading
List item 1 Link
List item 2 Link Hover
List item 3 Link Focus
List item 4 Link Selected
List item 5 Disabled
List item 6 Link
Nested List item 1
Nested List item 2
List item 3 Link Hover
List item 4 Link Focus
Nested List item 5 Selected
Nested List item 6 with long text label to demonstrate wrapping lines.
List item 7 Static
List item 8 with long text label to demonstrate wrapping lines.
Default on dark background
List Heading
List item 1 Link
List item 2 Link Hover
List item 3 Link Focus
List item 4 Link Selected
List item 5 Disabled
List item 6 Link
Nested List item 1
Nested List item 2
List item 3 Link Hover
List item 4 Link Focus
Nested List item 5 Selected
Nested List item 6 with long text label to demonstrate wrapping lines.
List item 7 Static
List item 8 with long text label to demonstrate wrapping lines.
Default on medium-blue background
List Heading
List item 1 Link
List item 2 Link Hover
List item 3 Link Focus
List item 4 Link Selected
List item 5 Disabled
List item 6 Link
Nested List item 1
Nested List item 2
List item 3 Link Hover
List item 4 Link Focus
Nested List item 5 Selected
Nested List item 6 with long text label to demonstrate wrapping lines.
List item 7 Static
List item 8 with long text label to demonstrate wrapping lines.
Default on dark-blue background
List Heading
List item 1 Link
List item 2 Link Hover
List item 3 Link Focus
List item 4 Link Selected
List item 5 Disabled
List item 6 Link
Nested List item 1
Nested List item 2
List item 3 Link Hover
List item 4 Link Focus
Nested List item 5 Selected
Nested List item 6 with long text label to demonstrate wrapping lines.
List item 7 Static
List item 8 with long text label to demonstrate wrapping lines.
Default on purple background
List Heading
List item 1 Link
List item 2 Link Hover
List item 3 Link Focus
List item 4 Link Selected
List item 5 Disabled
List item 6 Link
Nested List item 1
Nested List item 2
List item 3 Link Hover
List item 4 Link Focus
Nested List item 5 Selected
Nested List item 6 with long text label to demonstrate wrapping lines.
List item 7 Static
List item 8 with long text label to demonstrate wrapping lines.
With Icon
List Heading
List Item 1 With Icon
List Item 2 With Icon Hover
List Item 3 With Icon Focus
List Item 4 With Icon Selected
List Item 5 With Icon Disabled
List Item 6 With Icon Static
List Item 7 With Icon with long text label to demonstrate wrapping lines.
With Icon in Narrow Container
List Heading
List Item 1 With Icon
List Item 2 With Icon Hover
List Item 3 With Icon Focus
List Item 4 With Icon Selected
List Item 5 With Icon Disabled
List Item 6 With Icon Static
List Item 7 With Icon with long text label to demonstrate wrapping lines.
With Icon on dark background
List Heading
List Item 1 With Icon
List Item 2 With Icon Hover
List Item 3 With Icon Focus
List Item 4 With Icon Selected
List Item 5 With Icon Disabled
List Item 6 With Icon Static
List Item 7 With Icon with long text label to demonstrate wrapping lines.
With Icon on medium-blue background
List Heading
List Item 1 With Icon
List Item 2 With Icon Hover
List Item 3 With Icon Focus
List Item 4 With Icon Selected
List Item 5 With Icon Disabled
List Item 6 With Icon Static
List Item 7 With Icon with long text label to demonstrate wrapping lines.
With Icon on dark-blue background
List Heading
List Item 1 With Icon
List Item 2 With Icon Hover
List Item 3 With Icon Focus
List Item 4 With Icon Selected
List Item 5 With Icon Disabled
List Item 6 With Icon Static
List Item 7 With Icon with long text label to demonstrate wrapping lines.
With Icon on purple background
List Heading
List Item 1 With Icon
List Item 2 With Icon Hover
List Item 3 With Icon Focus
List Item 4 With Icon Selected
List Item 5 With Icon Disabled
List Item 6 With Icon Static
List Item 7 With Icon with long text label to demonstrate wrapping lines.
With Pill
List Heading
List Item 1 With Pill
99+
List Item 2 With Pill Hover
99+
List Item 3 With Pill Focus
99+
List Item 4 With Pill Selected
99+
List Item 5 With Pill Disabled
99+
List Item 6 With Pill Static
99+
List Item 7 With Pill with long text label to demonstrate wrapping lines.
99+
With Pill in Narrow Container
List Heading
List Item 1 With Pill
99+
List Item 2 With Pill Hover
99+
List Item 3 With Pill Focus
99+
List Item 4 With Pill Selected
99+
List Item 5 With Pill Disabled
99+
List Item 6 With Pill Static
99+
List Item 7 With Pill with long text label to demonstrate wrapping lines.
99+
With Pill on dark background
List Heading
List Item 1 With Pill
99+
List Item 2 With Pill Hover
99+
List Item 3 With Pill Focus
99+
List Item 4 With Pill Selected
99+
List Item 5 With Pill Disabled
99+
List Item 6 With Pill Static
99+
List Item 7 With Pill with long text label to demonstrate wrapping lines.
99+
With Pill on medium-blue background
List Heading
List Item 1 With Pill
99+
List Item 2 With Pill Hover
99+
List Item 3 With Pill Focus
99+
List Item 4 With Pill Selected
99+
List Item 5 With Pill Disabled
99+
List Item 6 With Pill Static
99+
List Item 7 With Pill with long text label to demonstrate wrapping lines.
99+
With Pill on dark-blue background
List Heading
List Item 1 With Pill
99+
List Item 2 With Pill Hover
99+
List Item 3 With Pill Focus
99+
List Item 4 With Pill Selected
99+
List Item 5 With Pill Disabled
99+
List Item 6 With Pill Static
99+
List Item 7 With Pill with long text label to demonstrate wrapping lines.
99+
With Pill on purple background
List Heading
List Item 1 With Pill
99+
List Item 2 With Pill Hover
99+
List Item 3 With Pill Focus
99+
List Item 4 With Pill Selected
99+
List Item 5 With Pill Disabled
99+
List Item 6 With Pill Static
99+
List Item 7 With Pill with long text label to demonstrate wrapping lines.
99+
With Icon and with Pill
List Heading
List Item 1 With Icon and Pill
99+
List Item 2 With Icon and Pill Hover
99+
List Item 3 With Icon and Pill Focus
99+
List Item 4 With Icon and Pill Selected
99+
List Item 5 With Icon and Pill Disabled
99+
List Item 6 With Icon and Pill Static
99+
List Item 7 With Icon and Pill with long text label to demonstrate wrapping lines.
99+
With Icon and with Pill in Narrow Container
List Heading
List Item 1 With Icon and Pill
99+
List Item 2 With Icon and Pill Hover
99+
List Item 3 With Icon and Pill Focus
99+
List Item 4 With Icon and Pill Selected
99+
List Item 5 With Icon and Pill Disabled
99+
List Item 6 With Icon and Pill Static
99+
List Item 7 With Icon and Pill with long text label to demonstrate wrapping lines.
99+
With Icon and with Pill on dark background
List Heading
List Item 1 With Icon and Pill
99+
List Item 2 With Icon and Pill Hover
99+
List Item 3 With Icon and Pill Focus
99+
List Item 4 With Icon and Pill Selected
99+
List Item 5 With Icon and Pill Disabled
99+
List Item 6 With Icon and Pill Static
99+
List Item 7 With Icon and Pill with long text label to demonstrate wrapping lines.
99+
With Icon and with Pill on medium-blue background
List Heading
List Item 1 With Icon and Pill
99+
List Item 2 With Icon and Pill Hover
99+
List Item 3 With Icon and Pill Focus
99+
List Item 4 With Icon and Pill Selected
99+
List Item 5 With Icon and Pill Disabled
99+
List Item 6 With Icon and Pill Static
99+
List Item 7 With Icon and Pill with long text label to demonstrate wrapping lines.
99+
With Icon and with Pill on dark-blue background
List Heading
List Item 1 With Icon and Pill
99+
List Item 2 With Icon and Pill Hover
99+
List Item 3 With Icon and Pill Focus
99+
List Item 4 With Icon and Pill Selected
99+
List Item 5 With Icon and Pill Disabled
99+
List Item 6 With Icon and Pill Static
99+
List Item 7 With Icon and Pill with long text label to demonstrate wrapping lines.
99+
With Icon and with Pill on purple background
List Heading
List Item 1 With Icon and Pill
99+
List Item 2 With Icon and Pill Hover
99+
List Item 3 With Icon and Pill Focus
99+
List Item 4 With Icon and Pill Selected
99+
List Item 5 With Icon and Pill Disabled
99+
List Item 6 With Icon and Pill Static
99+
List Item 7 With Icon and Pill with long text label to demonstrate wrapping lines.
99+
With Contextual Icons
List Heading
List Item 1 With Contextual Icons
List Item 2 With Contextual Icons Hover
List Item 3 With Contextual Icons Focus
List Item 4 With Contextual Icons Disabled
List Item 5 With Contextual Icons with long text label to demonstrate wrapping lines.
With Contextual Icons in Narrow Container
List Heading
List Item 1 With Contextual Icons
List Item 2 With Contextual Icons Hover
List Item 3 With Contextual Icons Focus
List Item 4 With Contextual Icons Disabled
List Item 5 With Contextual Icons with long text label to demonstrate wrapping lines.
With Contextual Icons on dark background
List Heading
List Item 1 With Contextual Icons
List Item 2 With Contextual Icons Hover
List Item 3 With Contextual Icons Focus
List Item 4 With Contextual Icons Disabled
List Item 5 With Contextual Icons with long text label to demonstrate wrapping lines.
With Contextual Icons on medium-blue background
List Heading
List Item 1 With Contextual Icons
List Item 2 With Contextual Icons Hover
List Item 3 With Contextual Icons Focus
List Item 4 With Contextual Icons Disabled
List Item 5 With Contextual Icons with long text label to demonstrate wrapping lines.
With Contextual Icons on dark-blue background
List Heading
List Item 1 With Contextual Icons
List Item 2 With Contextual Icons Hover
List Item 3 With Contextual Icons Focus
List Item 4 With Contextual Icons Disabled
List Item 5 With Contextual Icons with long text label to demonstrate wrapping lines.
With Contextual Icons on purple background
List Heading
List Item 1 With Contextual Icons
List Item 2 With Contextual Icons Hover
List Item 3 With Contextual Icons Focus
List Item 4 With Contextual Icons Disabled
List Item 5 With Contextual Icons with long text label to demonstrate wrapping lines.
With Checkboxes
Show/Hide Columns
Serial Number
Cluster Serial Number
Cluster Name
Remote Cluster Serial Number with long text
Product Family
Product Location
Group
Product Number
Contract Status
OS Version
System name
With Checkboxes in Narrow Container
Show/Hide Columns
Serial Number
Cluster Serial Number
Cluster Name
Remote Cluster Serial Number with long text
Product Family
Product Location
Group
Product Number
Contract Status
OS Version
System name
With Checkboxes on dark background
Show/Hide Columns
Serial Number
Cluster Serial Number
Cluster Name
Remote Cluster Serial Number with long text
Product Family
Product Location
Group
Product Number
Contract Status
OS Version
System name
With Checkboxes on medium-blue background
Show/Hide Columns
Serial Number
Cluster Serial Number
Cluster Name
Remote Cluster Serial Number with long text
Product Family
Product Location
Group
Product Number
Contract Status
OS Version
System name
With Checkboxes on dark-blue background
Show/Hide Columns
Serial Number
Cluster Serial Number
Cluster Name
Remote Cluster Serial Number with long text
Product Family
Product Location
Group
Product Number
Contract Status
OS Version
System name
With Checkboxes on purple background
Show/Hide Columns
Serial Number
Cluster Serial Number
Cluster Name
Remote Cluster Serial Number with long text
Product Family
Product Location
Group
Product Number
Contract Status
OS Version
System name