Accordions
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
Accordion item
-
Accordion item
Accordion content goes here.
-
Accordion item
-
Accordion item
<ul accordion="accordion">
<li class="accordion-item closed">
<h4>Accordion item</h4>
</li>
<li class="accordion-item">
<h4>Accordion item</h4>
<div>
<p>Accordion content goes here.</p>
</div>
</li>
<li class="accordion-item closed">
<h4>Accordion item</h4>
</li>
<li class="accordion-item closed">
<h4>Accordion item</h4>
</li>
</ul>
Alerts
Alerts can be used to display important messages with great contrast to draw the attention of the user. It comes in a few different colors. See examples below for available options.
This is an alert with a success message
This is an alert with an error message
This is an longform alert with muted message. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<p class="alert success">This is an alert with a success message</p>
<p class="alert error">This is an alert with an error message</p>
<p class="alert edit">This is an longform alert with muted message.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
Buttons
Button styles can be applied to any element. Typically you'll want to
use either a <button> or an <a> element. Buttons next to each other
is spaced out with the adjacent selector .btn + .btn.
<a class="btn" href="#">Default</a>
<button class="btn primary">Primary</button>
<button class="btn primary muted">Muted</button>
<a class="btn cancel" href="#">Delete</a>
Button sizes
There are two sizes for buttons: normal and small. Simply apply the size modifier class for the desired size. There is also an additional modifier that will make the button take the full width of the container. It may be used with the any of the button size and style modifiers.
<a class="btn primary" href="#">Primary</a>
<a class="btn" href="#">Default</a>
<a class="btn primary small" href="#">Primary small</a>
<a class="btn small" href="#">Default small</a>
Button groups
Button groups is used to add some extra spacing between buttons on the same .row.
<div class="btn-group-connected">
<input name="btn-group" type="radio" value="option1" id="option1">
<label for="option1" class="btn muted">Option 1</label>
<input name="btn-group" type="radio" value="option2" id="option2">
<label for="option2" class="btn muted">Option 2</label>
<input name="btn-group" type="radio" value="option3" id="option3">
<label for="option3" class="btn muted">Option 3</label>
</div>
Buttons with icons
<a class="btn" href="#"><span class="icon-rocket iconbtn"></span>Default</a>
<a class="btn" href="#">Default<span class="icon-rocket iconbtn-right"></span></a>
<a class="btn small" href="#"><span class="icon-rocket iconbtn"></span>Small</a>
<a class="btn small" href="#">Small<span class="icon-rocket iconbtn-right"></span></a>
Buttons with dropdown
<div class="btn-group-dropdown">
<a class="btn primary">Done</a>
<div tabindex="0" class="has-btn-dropdown">
<a class="btn primary"></a>
<div class="btn-dropdown">
<a href="#">Save block as template</a>
</div>
</div>
</div>
Dropdowns
Button styles can be applied to any element. Typically you'll want to
use either a <button> or an <a> element. Buttons next to each other
is spaced out with the adjacent selector .btn + .btn.
<div tabindex="0" class="has-btn-dropdown">
<a class="btn primary">Dropdown</a>
<div class="btn-dropdown">
<a href="#">Dropdown option 1</a>
<a href="#">Dropdown option 2</a>
<a href="#">Dropdown option 3</a>
</div>
</div>
<div tabindex="0" class="has-btn-dropdown">
<a class="btn">Dropdown</a>
<div class="btn-dropdown">
<a href="#">Dropdown option 1</a>
<a href="#">Dropdown option 2</a>
<a href="#">Dropdown option 3</a>
</div>
</div>
Modals
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<button class="btn primary modal-trigger">Show Modal</button>
<div class="modal">
<div class="modal-content">
<h2 class="modal-header">Modal<a href="#" class="icon-cross"></a></h2>
<div class="row text-center">
<p>Du kommer att ta bort följande utskick:</p>
<p class="ingress">'Header and left column'</p>
</div>
<div class="btn-group modal-footer">
<a class="btn small">Cancel</a>
<a class="btn cancel small right">Delete</a>
</div>
</div>
</div>
Multiselect
Button styles can be applied to any element. Typically you'll want to
use either a <button> or an <a> element. Buttons next to each other
is spaced out with the adjacent selector .btn + .btn.
-
- Multiselect option 1
- Multiselect option 2 1 prenumeranter
- Multiselect option 3
- Multiselect option 4
- Multiselect option 5
- Multiselect option 6
- Multiselect option 7
- Multiselect option 8
- Multiselect option 9
- Multiselect option 10
<div searchable-dropdown>
<div class="display-value">
Choose list...
</div>
<ul>
<li class="input">
<div class="input-wrap input-wrap-small">
<input type="text" class="has-icon no-mar small" placeholder="Search for list...">
<span class="icon-search prepend-icon"></span>
<span class="append-icon">
<a class="icon-cross ng-hide"></a>
</span>
</div>
</li>
<li>Multiselect option 1</li>
<li class="selected">
<span>Multiselect option 2</span>
<span style="color: #999;" class="right">1 prenumeranter</span>
</li>
<li>Multiselect option 3</li>
<li>Multiselect option 4</li>
<li>Multiselect option 5</li>
<li>Multiselect option 6</li>
<li>Multiselect option 7</li>
<li>Multiselect option 8</li>
<li>Multiselect option 9</li>
<li>Multiselect option 10</li>
</ul>
</div>
Nav
Button styles can be applied to any element. Typically you'll want to
use either a <button> or an <a> element.
<ul class="sidebar-nav">
<li><a href="#">Nav item 1</a></li>
<li><a href="#">Nav item 2</a></li>
<li><a href="#">Nav item 3</a></li>
<li><a href="#">Nav item 4</a></li>
<li><a href="#">Nav item 5</a></li>
</ul>
Notifications
Notifications comes in two styles. The default style is positive, meaning it comes with
a checkmark next to it. Add the class .error two display an error icon instead.
- Standard notification
- Error notification
<div style="position: relative;">
<ul id="flash-messages">
<li>
Standard notification
<span class="icon-cross"></span>
</li>
<li class="error">
Error notification
<span class="icon-cross"></span>
</li>
</ul>
</div>
Pagination
More info coming soon.
<ul class="pagination">
<li class="first"><a>First</a></li>
<li><a><span class="icon-arrow-left6"></span></a></li>
<li class="active"><a href="#1">1</a></li>
<li><a href="#1">2</a></li>
<li><a href="#1">3</a></li>
<li><a href="#1">4</a></li>
<li><a href="#1">5</a></li>
<li><a><span class="icon-arrow-right6"></span></a></li>
<li class="last"><a>Last</a></li>
</ul>
Post/Prefix
<div class="row">
<div class="append-btn">
<input type="text" />
<a class="btn primary" href="#">Primary</a>
</div>
</div>
<div class="append-btn">
<input class="small" type="text" />
<a class="btn primary small" href="#">Primary</a>
</div>
Progress bar
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="progress-wrap">
<div class="progress" style="width: 50%;">50%</div>
</div>
Tabs
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.