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 Heading 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 Heading 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 Heading 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.
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.
Section Title Small
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
<% var extensions = ['L50', 'L40', 'L30', 'L20', 'L10', '', 'D10', 'D20', 'D30', 'D40', 'D50']; %> <% var extensionsMinor = ['', 'L']; %> <% var extensionsDiverge = ['A', 'B']; %>Basic Colors
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
Sematic Colors
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
-
<% for (var i = 0; i < extensions.length; i++) { %>
<% } %>
Categorical Colors
-
<% for (var i = 1; i <= 30; i++) { %>
<% for (var j = 0; j < extensionsMinor.length; j++) { %>
<% } %>
<% } %>
Diverging Colors
-
<% for (var i = 1; i <= 6; i++) { %>
<% for (var j = 0; j < extensionsDiverge.length; j++) { %>
<% } %>
<% } %>
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.
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
Dropdowns
Dropdowns provide rich interactions in Splunk.
Menus
Selectable
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.