Cube SCSS Components Documentation v1.3.4

Badges

99 .badge

1 .badge-success

2 .badge-info

3 .badge-warning

4 .badge-danger

<p><span class="badge">99</span> .badge</p> <p><span class="badge badge-success">1</span> .badge-success</p> <p><span class="badge badge-info">2</span> .badge-info</p> <p><span class="badge badge-warning">3</span> .badge-warning</p> <p><span class="badge badge-danger">4</span> .badge-danger</p>

Bullets

.bullet

.bullet-success

.bullet-info

.bullet-warning

.bullet-danger

<p><span class="bullet"></span> .bullet</p> <p><span class="bullet bullet-success"></span> .bullet-success</p> <p><span class="bullet bullet-info"></span> .bullet-info</p> <p><span class="bullet bullet-warning"></span> .bullet-warning</p> <p><span class="bullet bullet-danger"></span> .bullet-danger</p>

Buttons

Button styles

<p> <button class="button">Button</button> </p> <p> <button class="button button-outline">Outline</button> </p> <p> <button class="button button-filled">Filled</button> </p> <p> <button class="button button-filled button-shadow">Shadow</button> </p> <p> <button class="button button-text">Text</button> </p> <p> <button class="button" disabled>Button</button> </p> <p> <button class="button button-outline" disabled>Outline</button> </p> <p> <button class="button button-filled" disabled>Filled</button> </p> <p> <button class="button button-filled button-shadow" disabled>Shadow</button> </p> <p> <button class="button button-text" disabled>Text</button> </p>

Button white

<p> <button class="button button-white">White</button> </p> <p> <button class="button button-white button-outline">Outline</button> </p> <p> <button class="button button-white button-filled">Filled</button> </p> <p> <button class="button button-white button-text">Text</button> </p> <p> <button class="button button-white" disabled>White</button> </p> <p> <button class="button button-white button-outline" disabled>Outline</button> </p> <p> <button class="button button-white button-filled" disabled>Filled</button> </p> <p> <button class="button button-white button-text" disabled>Text</button> </p>

Button list

<div class="button-list"> <button class="button">Button 1</button> <button class="button">Button 2</button> <button class="button">Button 3</button> <button class="button">Button 4</button> </div> <div class="button-list"> <button class="button button-outline">Button 1</button> <button class="button button-outline">Button 2</button> <button class="button button-outline">Button 3</button> <button class="button button-outline">Button 4</button> </div> <div class="button-list"> <button class="button button-filled">Button 1</button> <button class="button button-filled">Button 2</button> <button class="button button-filled">Button 3</button> <button class="button button-filled">Button 4</button> </div> <div class="button-list"> <button class="button button-filled button-shadow">Button 1</button> <button class="button button-filled button-shadow">Button 2</button> <button class="button button-filled button-shadow">Button 3</button> <button class="button button-filled button-shadow">Button 4</button> </div> <div class="button-list"> <button class="button button-text">Button 1</button> <button class="button button-text">Button 2</button> <button class="button button-text">Button 3</button> <button class="button button-text">Button 4</button> </div>

Button group

<div class="button-group"> <button class="button">Button 1</button> <button class="button">Button 2</button> <button class="button">Button 3</button> <button class="button">Button 4</button> </div> <div class="button-group"> <button class="button button-outline">Button 1</button> <button class="button button-outline">Button 2</button> <button class="button button-outline">Button 3</button> <button class="button button-outline">Button 4</button> </div> <div class="button-group"> <button class="button button-filled">Button 1</button> <button class="button button-filled">Button 2</button> <button class="button button-filled">Button 3</button> <button class="button button-filled">Button 4</button> </div> <div class="button-group"> <button class="button button-text">Button 1</button> <button class="button button-text">Button 2</button> <button class="button button-text">Button 3</button> <button class="button button-text">Button 4</button> </div>

Button colors

<div class="button-list"> <button class="button button-success">Success</button> <button class="button button-info">Info</button> <button class="button button-warning">Warning</button> <button class="button button-danger">Danger</button> </div> <div class="button-list"> <button class="button button-success" disabled>Success</button> <button class="button button-info" disabled>Info</button> <button class="button button-warning" disabled>Warning</button> <button class="button button-danger" disabled>Danger</button> </div> <div class="button-list"> <button class="button button-outline button-success">Success</button> <button class="button button-outline button-info">Info</button> <button class="button button-outline button-warning">Warning</button> <button class="button button-outline button-danger">Danger</button> </div> <div class="button-list"> <button class="button button-outline button-success" disabled>Success</button> <button class="button button-outline button-info" disabled>Info</button> <button class="button button-outline button-warning" disabled>Warning</button> <button class="button button-outline button-danger" disabled>Danger</button> </div> <div class="button-list"> <button class="button button-filled button-success">Success</button> <button class="button button-filled button-info">Info</button> <button class="button button-filled button-warning">Warning</button> <button class="button button-filled button-danger">Danger</button> </div> <div class="button-list"> <button class="button button-filled button-success" disabled>Success</button> <button class="button button-filled button-info" disabled>Info</button> <button class="button button-filled button-warning" disabled>Warning</button> <button class="button button-filled button-danger" disabled>Danger</button> </div> <div class="button-list"> <button class="button button-text button-success">Success</button> <button class="button button-text button-info">Info</button> <button class="button button-text button-warning">Warning</button> <button class="button button-text button-danger">Danger</button> </div> <div class="button-list"> <button class="button button-text button-success" disabled>Success</button> <button class="button button-text button-info" disabled>Info</button> <button class="button button-text button-warning" disabled>Warning</button> <button class="button button-text button-danger" disabled>Danger</button> </div>

Button group colors

<div class="button-group"> <button class="button button-success">Success</button> <button class="button button-info">Info</button> <button class="button button-warning">Warning</button> <button class="button button-danger">Danger</button> </div> <div class="button-group"> <button class="button button-success" disabled>Success</button> <button class="button button-info" disabled>Info</button> <button class="button button-warning" disabled>Warning</button> <button class="button button-danger" disabled>Danger</button> </div> <div class="button-group"> <button class="button button-outline button-success">Success</button> <button class="button button-outline button-info">Info</button> <button class="button button-outline button-warning">Warning</button> <button class="button button-outline button-danger">Danger</button> </div> <div class="button-group"> <button class="button button-outline button-success" disabled>Success</button> <button class="button button-outline button-info" disabled>Info</button> <button class="button button-outline button-warning" disabled>Warning</button> <button class="button button-outline button-danger" disabled>Danger</button> </div> <div class="button-group"> <button class="button button-filled button-success">Success</button> <button class="button button-filled button-info">Info</button> <button class="button button-filled button-warning">Warning</button> <button class="button button-filled button-danger">Danger</button> </div> <div class="button-group"> <button class="button button-filled button-success" disabled>Success</button> <button class="button button-filled button-info" disabled>Info</button> <button class="button button-filled button-warning" disabled>Warning</button> <button class="button button-filled button-danger" disabled>Danger</button> </div> <div class="button-group"> <button class="button button-text button-success">Success</button> <button class="button button-text button-info">Info</button> <button class="button button-text button-warning">Warning</button> <button class="button button-text button-danger">Danger</button> </div> <div class="button-group"> <button class="button button-text button-success" disabled>Success</button> <button class="button button-text button-info" disabled>Info</button> <button class="button button-text button-warning" disabled>Warning</button> <button class="button button-text button-danger" disabled>Danger</button> </div>

Button sizes

<div class="button-list"> <button class="button button-xs">Extra small</button> <button class="button button-sm">Small</button> <button class="button">Normal</button> <button class="button button-md">Medium</button> <button class="button button-lg">Large</button> </div> <div class="button-list"> <button class="button button-outline button-xs">Extra small</button> <button class="button button-outline button-sm">Small</button> <button class="button button-outline">Normal</button> <button class="button button-outline button-md">Medium</button> <button class="button button-outline button-lg">Large</button> </div> <div class="button-list"> <button class="button button-filled button-xs">Extra small</button> <button class="button button-filled button-sm">Small</button> <button class="button button-filled">Normal</button> <button class="button button-filled button-md">Medium</button> <button class="button button-filled button-lg">Large</button> </div> <div class="button-list"> <button class="button button-text button-xs">Extra small</button> <button class="button button-text button-sm">Small</button> <button class="button button-text">Normal</button> <button class="button button-text button-md">Medium</button> <button class="button button-text button-lg">Large</button> </div>

Cards

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

<div class="card"> <main class="card-body"> <h2>Card title</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> <footer class="card-footer"> <div class="button-list"> <button class="button">Hide</button> <button class="button button-filled">Show</button> </div> </footer> </div>

Images

Image overlay

With rich content

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

$1,150 per month
Sub-info here
<div class="card"> <header class="card-header"> <img class="card-header-image" src="…"> <div class="card-header-overlay"> <h2>Image overlay</h2> <div class="lead">With rich content</div> </div> </header> <main class="card-body"> <h2>Card title</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> <footer class="card-footer"> <div> <strong>$1,150</strong> <small class="text-muted"> per month</small> <div class="small text-muted">Sub-info here</div> </div> <button class="button button-filled button-shadow">Filled</button> </footer> </div>

Borderless card

Image overlay

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

cube-scss-components v1.3.4
<div class="card card-borderless"> <header class="card-header"> <img class="card-header-image" src="…"> <div class="card-header-overlay"> <h2>Image overlay</h2> </div> </header> <main class="card-body"> <h2>Card title</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> <div class="small text-muted">cube-scss-components v1.3.4</div> </main> <footer class="card-footer card-footer-right"> <div class="button-list"> <button class="button">Normal</button> <button class="button button-outline">Outline</button> </div> </footer> </div>

Card shadow

Image overlay

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

<div class="card card-borderless card-shadow"> <header class="card-header"> <img class="card-header-image" src="…"> <div class="card-header-overlay"> <h2>Image overlay</h2> </div> </header> <main class="card-body"> <h2>Card title</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> </div>

Card list

Card 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

cube-scss-components v1.3.4

Card 2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

Card 3

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

cube-scss-components v1.3.4
<div class="card-list"> <div class="card"> <main class="card-body"> <h2>Card 1</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> <div class="small text-muted">cube-scss-components v1.3.4</div> </main> <footer class="card-footer"> <button class="button button-filled button-shadow">Call to action 1</button> </footer> </div> <div class="card"> <main class="card-body"> <h2>Card 2</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> </div> <div class="card"> <main class="card-body"> <h2>Card 3</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> <footer class="card-footer"> <div class="small text-muted">cube-scss-components v1.3.4</div> </footer> </div> </div>

Card grid

In this example .card-grid-example equals: .card-grid-example { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

Card 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

cube-scss-components v1.3.4

Card 2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

Card 3

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!

cube-scss-components v1.3.4
<div class="card-grid card-grid-example"> <div class="card"> <main class="card-body"> <h2>Card 1</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> <div class="small text-muted">cube-scss-components v1.3.4</div> </main> <footer class="card-footer"> <button class="button button-filled button-shadow">Call to action 1</button> </footer> </div> <div class="card"> <main class="card-body"> <h2>Card 2</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> </div> <div class="card"> <main class="card-body"> <h2>Card 3</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae qui culpa placeat! Velit in consequuntur maiores totam, distinctio a! Ipsam explicabo assumenda repellendus quae aliquid ducimus expedita dolor non architecto!</p> </main> <footer class="card-footer"> <div class="small text-muted">cube-scss-components v1.3.4</div> </footer> </div> </div>

Forms

<fieldset class="form-group"> <label class="form-label"> Input text <input class="form-control" type="text" placeholder="Type something"> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Input email <input class="form-control" type="email" placeholder="Type an email address"> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Input number <input class="form-control" type="number" placeholder="Type a number"> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Select <select class="form-control" required> <option value hidden>Choose an option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Textarea <textarea class="form-control" placeholder="Type something…"></textarea> </label> </fieldset> <fieldset class="form-group"> <label class="form-label">Input checkbox</label> <label class="form-label"> <input class="form-control" type="checkbox"> <span class="form-text">This is a checkbox</span> </label> <label class="form-label"> <input class="form-control" type="checkbox"> <span class="form-text">This is another checkbox with a very long text that should align nicely along the checkbox. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim expedita tempore soluta officiis similique. Deleniti adipisci alias modi harum illum laboriosam accusamus enim iste nesciunt? Aliquid reprehenderit magnam mollitia doloremque!</span> </label> </fieldset> <fieldset class="form-group"> <label class="form-label">Input radio</label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio"> <span class="form-text">This is a radio</span> </label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio"> <span class="form-text">This is another radio</span> </label> </fieldset>

Readonly

<fieldset class="form-group"> <label class="form-label"> Input readonly <input class="form-control" type="text" value="This input is readonly" readonly> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Textarea <textarea class="form-control" readonly>This textarea is readonly</textarea> </label> </fieldset>

Disabled

<fieldset class="form-group"> <label class="form-label"> Input text <input class="form-control" type="text" placeholder="Type something" disabled> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Input email <input class="form-control" type="email" placeholder="Type an email address" disabled> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Input number <input class="form-control" type="number" placeholder="Type a number" disabled> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Select <select class="form-control" required disabled> <option value hidden>Choose an option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </label> </fieldset> <fieldset class="form-group"> <label class="form-label"> Textarea <textarea class="form-control" placeholder="Type something…" disabled></textarea> </label> </fieldset> <fieldset class="form-group"> <label class="form-label">Input checkbox</label> <label class="form-label"> <input class="form-control" type="checkbox" disabled> <span class="form-text">This is a checkbox</span> </label> <label class="form-label"> <input class="form-control" type="checkbox" disabled> <span class="form-text">This is another checkbox</span> </label> </fieldset> <fieldset class="form-group"> <label class="form-label">Input radio</label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio" disabled> <span class="form-text">This is a radio</span> </label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio" disabled> <span class="form-text">This is another radio</span> </label> </fieldset>

Form validation

The validation error highlights when the input, select or textarea element has a not empty placeholder attribute and you start writing something (the placeholder disappears)…

Since it works with the :placeholder-shown selector, this have no effect on checkbox, radio and select elements.

If you want to highlight required fields after the user tries to submit the form, you have to add the validate class to form element or the element itself (see Form validation, show required elements).

<form> <fieldset class="form-group"> <input class="form-control" type="text" placeholder="Text required, minlength 10" minlength="10" required> <input class="form-control" type="email" placeholder="Email required" required> <input class="form-control" type="password" placeholder="Password, at least 1 number, 1 uppercase and 1 lowercase, minlength 8" title="At least 1 number, 1 uppercase and 1 lowercase, minlength 8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required> <input class="form-control" type="number" placeholder="Number required, min 5, max 10" min="5" max="10" required> <select class="form-control" required> <option value hidden>Select required, no effect</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <textarea class="form-control" placeholder="Textarea required, minlength 10" minlength="10" required></textarea> <label class="form-label"> <input class="form-control" type="checkbox" required> <span class="form-text">Checkbox required, no effect</span> </label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio" required> <span class="form-text">Radio required, no effect</span> </label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio" required> <span class="form-text">Radio required, no effect</span> </label> </fieldset> </form>

Form validation, show required elements

Just add the validate class to the form element or the element itself…

<form class="validate"> <fieldset class="form-group"> <input class="form-control" type="text" placeholder="Text required" required> <input class="form-control" type="email" placeholder="Email required" required> <input class="form-control" type="number" placeholder="Number required" required> <select class="form-control" required> <option value hidden>Select required</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <textarea class="form-control" placeholder="Textarea required" required></textarea> <label class="form-label"> <input class="form-control" type="checkbox" required> <span class="form-text">Checkbox required</span> </label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio" required> <span class="form-text">Radio required</span> </label> <label class="form-label"> <input class="form-control" type="radio" name="input-radio" required> <span class="form-text">Radio required</span> </label> </fieldset> </form>

Labels

Label .label

Success .label-success

Info .label-info

Warning .label-warning

Danger .label-danger

Consecutivelabels

<p><span class="label">Label</span> .label</p> <p><span class="label label-success">Success</span> .label-success</p> <p><span class="label label-info">Info</span> .label-info</p> <p><span class="label label-warning">Warning</span> .label-warning</p> <p><span class="label label-danger">Danger</span> .label-danger</p> <p><span class="label">Consecutive</span><span class="label">labels</span></p>

Sizes

Label .label

Small .label-sm

Extra small .label-xs

<p><span class="label">Label</span> .label</p> <p><span class="label label-sm">Small</span> .label-sm</p> <p><span class="label label-xs">Extra small</span> .label-xs</p>

List group

  • Subheader

    Accessory
  • Item #1
  • Item #2
<ul class="list-group"> <li class="list-group-item"> <div class="list-group-item-body">Basic</div> </li> <li class="list-group-item"> <a> <div class="list-group-item-body">Clickable</div> </a> </li> <li class="list-group-item"> <div class="list-group-item-header"> <div>With accessory</div> <div class="list-group-item-accessory"> <a class="action">Action</a> </div> </div> </li> <li class="list-group-item"> <div class="list-group-item-header"> <div>With accessory list</div> <div class="list-group-item-accessory list-group-item-accessory-list"> <button class="action" disabled>Disabled button</button> <a class="action">Link</a> </div> </div> </li> <li class="list-group-item"> <div class="list-group-item-header"> <div class="list-group-item-accessory"> <input class="form-control" type="checkbox"> </div> <div>With accessory to the left</div> </div> </li> <li class="list-group-item"> <div class="list-group-item-header"> <h4>Rich content</h4> </div> <div class="list-group-item-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio perferendis nesciunt voluptatum, sequi molestias aut tempore temporibus quod non delectus dicta odit, cum eaque quos neque sapiente, dolores ut id.</div> <div class="list-group-item-footer"> <div>This is a footer…</div> <div>With <strong>formatted</strong> text.</div> </div> </li> <li class="list-group-item"> <a> <div class="list-group-item-header"> <h4>Clickable rich content</h4> </div> <div class="list-group-item-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio perferendis nesciunt voluptatum, sequi molestias aut tempore temporibus quod non delectus dicta odit, cum eaque quos neque sapiente, dolores ut id.</div> </a> </li> <li class="list-group-item"> <a> <div class="list-group-item-header"> <h4>Clickable header</h4> <div class="list-group-item-accessory"> <button class="action">•••</button> </div> </div> </a> <div class="list-group-item-container"> <div class="list-group-item-body"> <p>This is usefull with <code>.list-group-item-container</code> you can collapse with your own javascript (not provided here)…</p> </div> <div class="list-group-item-footer">cube-scss-components v1.3.4</div> </div> </li> </ul> <ul class="list-group"> <li class="list-group-item-subheader"> <h3>Subheader</h3> <div class="list-group-item-accessory"> <div>Accessory</div> </div> </li> <li class="list-group-item"> <div class="list-group-item-body">Item #1</div> </li> <li class="list-group-item"> <div class="list-group-item-body">Item #2</div> </li> </ul>

Pagination

<nav class="pagination"> <a class="page-item page-button">Prev</a> <a class="page-item page-button">1</a> <a class="page-item page-button">2</a> <div class="page-item page-info">Page 4/10</div> <div class="page-item">Inactive</div> <div class="page-item">10</div> <a class="page-item page-button">Next</a> </nav>

Sliders

<fieldset class="form-group"> <label class="form-label"> Slide <input class="slider" type="range" step="1" min="1" max="12"> </label> </fieldset>

Tables

Header 1Header 2
Line 1Cell 1Cell 2
Line 2Cell 3Cell 4
Line 3Cell 5Cell 6
<table class="table"> <thead> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <th>Line 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Line 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Line 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table>

Striped rows

Header 1Header 2
Line 1Cell 1Cell 2
Line 2Cell 3Cell 4
Line 3Cell 5Cell 6
<table class="table table-striped"> <thead> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <th>Line 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Line 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Line 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table>

Bordered table

Header 1Header 2
Line 1Cell 1Cell 2
Line 2Cell 3Cell 4
Line 3Cell 5Cell 6
<table class="table table-bordered"> <thead> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <th>Line 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Line 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Line 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table>

Borderless table

Header 1Header 2
Line 1Cell 1Cell 2
Line 2Cell 3Cell 4
Line 3Cell 5Cell 6
<table class="table table-borderless"> <thead> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <th>Line 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Line 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Line 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table>

Hoverable rows

Header 1Header 2
Line 1Cell 1Cell 2
Line 2Cell 3Cell 4
Line 3Cell 5Cell 6
<table class="table table-hover"> <thead> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <th>Line 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Line 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Line 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table>

Typography

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

hr

.lead – Lorem ipsum

.text-muted – Lorem ipsum

.text-success – Lorem ipsum

.text-info – Lorem ipsum

.text-warning – Lorem ipsum

.text-danger – Lorem ipsum

strong – Lorem ipsum

mark – Lorem ipsum

s – Lorem ipsum

del – Lorem ipsum

i – Lorem ipsum

em – Lorem ipsum

u – Lorem ipsum

ins – Lorem ipsum

abbr – Lorem ipsum

.text-left
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias expedita cum aliquam adipisci modi fugit possimus velit repellat quaerat! Nisi sequi suscipit nihil laboriosam quidem labore. Ipsam provident accusantium quas.

.text-justify
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam aliquid aperiam veritatis qui similique aspernatur corporis impedit animi. Debitis corporis ad id quis esse? Animi non vel amet natus repellat.

.text-center
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus aliquam, delectus nisi deleniti ea expedita architecto id consectetur consequatur facere provident asperiores, repellendus vel ut reprehenderit at assumenda perspiciatis optio!

.text-right
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur ut, iure amet unde aspernatur consectetur perspiciatis quasi molestiae! Neque ullam aut, sequi beatae tempora exercitationem sunt a voluptas eius.

link

blockquote – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h1>H1 heading</h1> <h2>H2 heading</h2> <h3>H3 heading</h3> <h4>H4 heading</h4> <h5>H5 heading</h5> <h6>H6 heading</h6> <p>hr</p> <hr> <p class="lead">.lead – Lorem ipsum</p> <p class="text-muted">.text-muted – Lorem ipsum</p> <p class="text-success">.text-success – Lorem ipsum</p> <p class="text-info">.text-info – Lorem ipsum</p> <p class="text-warning">.text-warning – Lorem ipsum</p> <p class="text-danger">.text-danger – Lorem ipsum</p> <p><strong>strong – Lorem ipsum</strong></p> <p><mark>mark – Lorem ipsum</mark></p> <p><s>s – Lorem ipsum</s></p> <p><del>del – Lorem ipsum</del></p> <p><i>i – Lorem ipsum</i></p> <p><em>em – Lorem ipsum</em></p> <p><u>u – Lorem ipsum</u></p> <p><ins>ins – Lorem ipsum</ins></p> <p><abbr title="Abbreviation">abbr – Lorem ipsum</abbr></p> <p class="text-left">.text-left<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias expedita cum aliquam adipisci modi fugit possimus velit repellat quaerat! Nisi sequi suscipit nihil laboriosam quidem labore. Ipsam provident accusantium quas.</p> <p class="text-justify">.text-justify<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam aliquid aperiam veritatis qui similique aspernatur corporis impedit animi. Debitis corporis ad id quis esse? Animi non vel amet natus repellat.</p> <p class="text-center">.text-center<br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus aliquam, delectus nisi deleniti ea expedita architecto id consectetur consequatur facere provident asperiores, repellendus vel ut reprehenderit at assumenda perspiciatis optio!</p> <p class="text-right">.text-right<br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id consequuntur ut, iure amet unde aspernatur consectetur perspiciatis quasi molestiae! Neque ullam aut, sequi beatae tempora exercitationem sunt a voluptas eius.</p> <p> <a>link</a> </p> <blockquote>blockquote – Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>

code

This is a <button>Button</button> inline code within a paragraph.

<h1>Title</h1> <ul> <li>item 1</li> <li>item 2</li> </ul> <a href="…">click here</a>
<p>This is a <code>&lt;button&gt;Button&lt;/button&gt;</code> inline code within a paragraph.</p> <code class="code-block">&lt;h1&gt;Title&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;a href=&quot;…&quot;&gt;click here&lt;/a&gt;</code>

Sizes

H1 heading with small inline text

H2 heading with small inline text

H3 heading with small inline text

H4 heading with small inline text

H5 heading with small inline text
H6 heading with small inline text

H1 heading with .small-block

H2 heading with .small-block

H3 heading with .small-block

H4 heading with .small-block

H5 heading with .small-block
H6 heading with .small-block

This is a small tag.

This is a .small paragraph

<h1>H1 heading with <small>small inline text</small></h1> <h2>H2 heading with <small>small inline text</small></h2> <h3>H3 heading with <small>small inline text</small></h3> <h4>H4 heading with <small>small inline text</small></h4> <h5>H5 heading with <small>small inline text</small></h5> <h6>H6 heading with <small>small inline text</small></h6> <h1>H1 heading with <small class="small-block">.small-block</small></h1> <h2>H2 heading with <small class="small-block">.small-block</small></h2> <h3>H3 heading with <small class="small-block">.small-block</small></h3> <h4>H4 heading with <small class="small-block">.small-block</small></h4> <h5>H5 heading with <small class="small-block">.small-block</small></h5> <h6>H6 heading with <small class="small-block">.small-block</small></h6> <p>This is a <small>small</small> tag.</p> <p class="small">This is a .small paragraph</p>