UI Elements
Buttons
Default button that can be created by adding the .button
class to any element, or using the <button>
element.
Alternative stylings are .button-pill
.button-flat
.button-collapse
Cards
You can use the .card
class and it is child classes to create a card.
Basic
<div class="card">
<div class="card-content">
<span class="card-title">Card Title</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
<div class="card-footer">
<a href="">Leave a comment?</a>
</div>
</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
With image
<div class="card">
<div class="card-image">
<img src="http://onebigphoto.com/uploads/2012/10/stunning-dolomites-mountains-italy.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<div class="card-footer">
<a href="">Leave a comment?</a>
</div>
</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Spinner
Create a progress spinner by adding the .spinner
class to an empty element.
<div class="spinner"></div>
Breadcrumbs
Applies to default silverstripe breadcrumbs, separators can be changed via :after
element.
Progress bars
Progress bars are an outer element with the .progress class as as an inner <span>
containing an inline style style="width: *%"
.
<div class="progress">
<span style="width: 25%">25%</span>
</div>
Drop shadow
Apply to any element via .drop-shadow
class.
Modals
To create a modal, you need to ensure that an ID is added to the modal element, and you can then link to open it via the id, ex: <a href="#modal"></a>
.
<div id="modal" class="modal">
<div class="modal-container">
<div class="modal-header">
Modal Header
<a href="#close" class="modal-close">×</a>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros.</p>
</div>
<div class="modal-footer">
<p>Modal Footer</p>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros. Integer rhoncus pretium orci ut sagittis. Proin sollicitudin sapien eu dui imperdiet, et viverra enim dignissim.
Dropdowns
Dropdowns are created by adding the .dropdown
class to a <button>
and nesting a .dropdown-content
class. Responds to :focus
.
<button class="dropdown button">
Dropdown
<ul class="dropdown-content">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</button>
Tooltips
Apply tooltips to any element as long as you are using one of the .tooltip-*
classes coupled with the data-hint
data attribute.
class="tooltip-top" data-hint="Top tooltip"
Top tooltip | .tooltip-top |
Right tooltip | .tooltip-right |
Bottom tooltip | .tooltip-bottom |
Left tooltip | .tooltip-left |
Persistent tooltip | .tooltip-bottom.tooltip-always |
Pagination
Default pagination for SilverStripe templates.
<% if List.MoreThanOnePage %>
<div class="pagination">
<ul>
<% if List.NotFirstPage %>
<li class="prev"><a href="$List.PrevLink">«</a></li>
<% else %>
<li class="prev disabled"><span>«</span></li>
<% end_if %>
<% loop List.PaginationSummary(4) %>
<% if CurrentBool %>
<li class="active disabled"><span>$PageNum</span></li>
<% else %>
<% if Link %>
<li><a href="$Link">$PageNum</a></li>
<% else %>
<li class="disabled"><span>…</span></li>
<% end_if %>
<% end_if %>
<% end_loop %>
<% if List.NotLastPage %>
<li class="next"><a href="$List.NextLink">»</a></li>
<% else %>
<li class="next disabled"><span>»</span></li>
<% end_if %>
</ul>
</div>
<% end_if %>
Colors
Can be used as $variable
or .class-name
. You can view and modify the color palette inside of the /globals/_globals.scss
or /layout/_color-palette.scss
.
Base Colors
color-base-primary
color-base-selection
color-base-lines
Text Colors
color-text-primary
color-text-secondary
color-text-heading
color-text-ui
Background Colors
color-background-dark
color-background-light
color-background-body
State Colors
color-state-muted
color-state-primary
color-state-success
color-state-warning
color-state-error
Blue Colors
color-blue-darker
color-blue-dark
color-blue
color-blue-light
color-blue-lighter
Green Colors
color-green-darker
color-green-dark
color-green
color-green-light
color-green-lighter
Cream Colors
color-cream-darker
color-cream-dark
color-cream
color-cream-light
color-cream-lighter
Red Colors
color-red-darker
color-red-dark
color-red
color-red-light
color-red-lighter
Gray Colors
color-gray-darker
color-gray-dark
color-gray
color-gray-light
color-gray-lighter