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>

Card Title

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>

Card Title

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>

25%

 

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">&times;</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>

Open Modal

 

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">&laquo;</a></li>
      <% else %>
        <li class="prev disabled"><span>&laquo;</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>&hellip;</span></li>
          <% end_if %>
        <% end_if %>
      <% end_loop %>

      <% if List.NotLastPage %>
        <li class="next"><a href="$List.NextLink">&raquo;</a></li>
      <% else %>
        <li class="next disabled"><span>&raquo;</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