Cupcake UI Style Guide

preview of basic elements, classes, & UI components used in splunk

Typography

Headings & Paragraphs

H1 Page Title

Reports are based on single searches and can include visualizations, statistics and/or events. Click the name to view the report. Open the report in Pivot or Search to refine the parameters of further explore the data.

H2 Section Title

Reports are based on single searches and can include visualizations, statistics and/or events. Click the name to view the report. Open the report in Pivot or Search to refine the parameters of further explore the data.

H3 Section Title

Reports are based on single searches and can include visualizations, statistics and/or events. Click the name to view the report. Open the report in Pivot or Search to refine the parameters of further explore the data.

H4 Section Title

Reports are based on single searches and can include visualizations, statistics and/or events. Click the name to view the report. Open the report in Pivot or Search to refine the parameters of further explore the data.

H5 Section Title

Reports are based on single searches and can include visualizations, statistics and/or events. Click the name to view the report. Open the report in Pivot or Search to refine the parameters of further explore the data.

H6 Normal Text Heading:

Reports are based on single searches and can include visualizations, statistics and/or events. Click the name to view the report. Open the report in Pivot or Search to refine the parameters of further explore the data.

List Types

Definition List Dotted

    Item 1
    Definition
    Item 2
    Definition
    Item 3
    Definition
    Item 4
    Definition

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Colors

Brand

Primary Colors (From Visualizations)

These can be used as accent colors where necessary.

Secondary Colors

Links

Interactive Elements

Primary Interactive Elements

Errors and Warnings

Tables

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Greys

Tables

Typically tables are pushed to the edges of the container.

Basic Table

head 1 head 2 head 3
foot 1 foot 2 foot 3
data 1 data 2 data 3
data 1 data 2 data 3
data 1 data 2 data 3

Sortable Table

Table Header 1 Table Header 2 Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Chrome Table

Table Header 1 Table Header 2 Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Striping

Can also be manually striped with odd and even classes on the rows.

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td>Table Footer 1</td><td>Table Footer 2</td><td>Table Footer 3</td>
                        </tr>
                    </tfoot>
                    <tbody>
                        ...
                    </tbody>
                </table>
                

Expanding Rows

Row expanding is another pervasive pattern. The expanded area could include any information in almost any format.

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Attribute 1
Value Edit
Attribute 2
Value
Attribute 3
Value Edit
Attribute 4
Value
Division 1Division 2Division 3
Division 1Division 2Division 3

Implementation Example

Index name Searchable Searchable Data Copies Replicated Data Copies Data Buckets Size
_audit Yes 2
 
3
 
 
11 <0.01Gb
_internal Yes 2
 
 
3
 
 
39 0.36Gb
index01 Yes 2
 
 
3
 
 
 
83 4.91Gb
index02 Yes 2
 
 
3
 
 
 
80 4.89Gb
index03 Yes 2
 
 
3
 
 
 
80 4.81Gb
index04 Yes 2
 
 
3
 
 
 
78 4.82Gb
index05 Yes 2
 
 
3
 
 
 
80 4.90Gb
index06 Yes 2
 
 
3
 
 
 
83 4.88Gb
State: Disable Enable

Buttons

Large Buttons

Small Buttons

Mini Buttons

Icon Only Buttons

button groups

1 2 3
4 5 6

buttons with menu

draggable button

Draggable
Combo

Forms

Inputs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Help

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Some helpful information

Complex form with feedback

Complex form with sections

enable actions

help text

Prepend and Append Input



%

Search Field

Modals

    <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>

Accordions

Some Content

Icons

  • Logo
  • icon-splunk
  • icon-greater
  • icon-hunk
  • icon-enterprise
  • Shapes
  • icon-circle
  • icon-circle-filled
  • icon-box-filled
  • icon-triangle-up-small
  • icon-triangle-right
  • icon-triangle-right-small
  • icon-triangle-down
  • icon-triangle-down-small
  • icon-triangle-left
  • icon-triangle-left-small
  • Arrows & Pointers
  • icon-arrow-up
  • icon-arrow-right
  • icon-arrow-down
  • icon-arrow-left
  • icon-chevron-up
  • icon-chevron-right
  • icon-chevron-down
  • icon-chevron-left
  • icon-two-arrows-cycle
  • icon-external
  • icon-rotate-counter
  • icon-rotate
  • icon-location
  • Actions
  • icon-trash
  • icon-share
  • icon-export
  • icon-print
  • icon-search-thin
  • icon-pivot
  • icon-pause
  • icon-stop
  • icon-play
  • icon-sort
  • icon-sorted-up
  • icon-sorted-down
  • icon-minus
  • icon-minus-circle
  • icon-plus
  • icon-plus-circle
  • icon-x, icon-cancel or icon-close
  • icon-x-circle
  • icon-collapse-left
  • icon-expand-right
  • Concepts
  • icon-activity
  • icon-string
  • icon-number
  • icon-text
  • icon-not-allowed
  • icon-data
  • icon-data-input
  • icon-settings
  • icon-distributed-environment
  • icon-visible
  • icon-hidden
  • icon-boolean
  • icon-menu
  • Misc
  • icon-info
  • icon-info-circle
  • icon-question
  • icon-question-circle
  • icon-box-unchecked
  • icon-box-checked
  • icon-check-circle
  • icon-alert-circle
  • icon-code
  • icon-code-thin
  • icon-error or icon-alert
  • icon-warning
  • Objects
  • icon-bell
  • icon-bookmark
  • icon-bulb
  • icon-calendar
  • icon-check
  • icon-clock
  • icon-cloud
  • icon-flag
  • icon-gear
  • icon-lightning
  • icon-lock
  • icon-lock-unlocked
  • icon-mail
  • icon-pencil
  • icon-speech-bubble
  • icon-star
  • icon-user
  • icon-warning-sign or icon-alert
  • icon-clipboard
  • icon-paintbrush
  • icon-warning-sign
  • Results & Visualizations
  • icon-chart-area
  • icon-chart-bar
  • icon-chart-column
  • icon-chart-pie
  • icon-chart-scatter
  • icon-chart-line
  • icon-single-value
  • icon-gauge-radial
  • icon-gauge-marker
  • icon-gauge-filler
  • icon-label-rotation--90
  • icon-label-rotation--45
  • icon-label-rotation-0
  • icon-label-rotation-45
  • icon-label-rotation-90
  • Formatting
  • icon-list
  • icon-table
  • icon-bar-beside
  • icon-bar-stacked
  • icon-bar-stacked-100
  • icon-missing-value-skipped
  • icon-missing-value-zero
  • icon-missing-value-join
  • Documents
  • icon-report
  • icon-report-pivot
  • icon-dashboard
  • icon-panel
  • icon-panel-pivot

Tooltip

Splunk uses bootstrap styled tooltips.

hover over me
Tooltip on top

Alerts

Keep alerts simple.

Info!
Warning!
Error!

Date Picker