Bubbles 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
- List Item 1
- List Item 2
- 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 1 | Table Header 2 | Table Header 3 |
---|---|---|
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 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 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Chrome Table
Table Header 1 | Table Header 2 | Table Header 3 |
---|---|---|
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Striping
Can also be manually striped with odd and even classes on the rows.
Table Header 1 | Table Header 2 | Table Header 3 |
---|---|---|
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 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.
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 |
Buttons
active active active active
disabled disabled disabled disabled
Large Buttons
Small Buttons
Mini Buttons
Icon Only Buttons
button groups
buttons with menu
draggable button
Links
Link
Link with Icon
Note the extra markup so that the icon and the space after it does not underline.
<a href="http://example.com/"><i class="icon-print icon-no-underline"></i><span>Print</span></a>
External Link
<a class="external" href="http://example.com/">Documentation</a>
Pills
<a href="#" class="btn-pill">pill</a>
Pagination
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.
Complex form with feedback
Complex form with sections
Prepend and Append Input
Search Field
Dropdowns
Dropdowns provide rich interactions in Splunk.
Menus
Selectable
Complex Dialog Examples
Modals
Modal header
One fine body…
<div class="modal hide fade" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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
Icons
Alerts
Keep alerts simple.