Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
No default class
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<divclass="alert alert-success"role="alert"><divclass="alert-body">...</div></div><divclass="alert alert-info"role="alert"><divclass="alert-body">...</div></div><divclass="alert alert-warning"role="alert"><divclass="alert-body">...</div></div><divclass="alert alert-danger"role="alert"><divclass="alert-body">...</div></div><!-- .alert-error is also available, identical to .alert-danger -->
Alert error overlay
Deprecated
This alert was so ugly we made it redundant. It's still in the codebase to keep it backwards compatible.
This is how it looks now. Exactly the same as .alert-info thanks to Sass @extend functionality.
Sorry
Dit is geen artikel. Klik op een artikel om meer info te zien.
<divclass="alert-error-body"><divclass="alert-error-block"><spanclass="fa fa-exclamation-triangle fa-4x alert-error-opacity"></span><pclass="alert-error-title">Sorry</p><pclass="alert-error-subtext alert-error-opacity">Dit is geen artikel. Klik op een artikel om meer info te zien.</p></div></div>
Titles on alerts
Message title
Better check yourself, you're not looking too good.
Drink enough water
Wear sunscreen
<divclass="alert alert-warning"role="alert"><divclass="alert-title">Message title</div><divclass="alert-body">
Better check yourself, you're not looking too good.
<ol><li>Drink enough water</li><li>Wear sunscreen</li></ol></div></div>
Dismissible alerts
Build on any alert by adding an optional .alert-dismissible and close button.
OMG, You successfully tied your shoes this morning.
Go outside! Live, breath, ... YOLO
Watch out, this alert is NSFW
Some people are a PITA
<divclass="alert alert-success"role="alert"><divclass="alert-body"><spanclass="alert-tip"data-toggle="tooltip"title="Oh My God">OMG</span></div></div><divclass="alert alert-info"role="alert"><divclass="alert-body"><spanclass="alert-tip"data-toggle="tooltip"title="You Only Live Once">YOLO</span></div></div><divclass="alert alert-warning"role="alert"><divclass="alert-body"><spanclass="alert-tip"data-toggle="tooltip"title="Not Safe For Work">NSFW</span></div></div><divclass="alert alert-danger"role="alert"><divclass="alert-body"><spanclass="alert-tip"data-toggle="tooltip"title="Pain In The Ass">PITA</span></div></div>
Standalone alerts
Deprecated
This alert couldn't cope with multiple alerts. It's still in the codebase to keep it backwards compatible.
<divclass="alert alert-standalone alert-danger alert-dismissible"role="alert"><divclass="alert-title"><buttontype="button"class="close"data-dismiss="alert"><spanclass="icon icon-close"aria-hidden="true"></span><spanclass="sr-only">Close</span></button>
Message title
</div><divclass="alert-body">
Better check yourself, you're not looking too good.
</div></div>
Standalone alerts container
Container positioning alerts on the screen so that they're always visible, even if you have scrolled.
Message title
Better check yourself, you're not looking too good.
Message title
Better check yourself, you're not looking too good.
Message title
Better check yourself, you're not looking too good.
Message title
Better check yourself, you're not looking too good.
<divclass="alert-standalone-container fjs-standalone-alert-example"><divclass="alert alert-danger alert-dismissible"role="alert"><divclass="alert-title"><buttontype="button"class="close"data-dismiss="alert"><spanclass="icon icon-close"aria-hidden="true"></span><spanclass="sr-only">Close</span></button>
Message title
</div><divclass="alert-body">
Better check yourself, you're not looking too good.
</div></div></div>
Apps
Graphical representation of the available DNR applications, see DNR Portal
<divclass="app"><ahref="#"class="app-link"><spanclass="app-icon">S</span><spanclass="app-title">Sitebeheer</span></a></div><!-- or as a <button> --><divclass="app"><buttonclass="app-link"type="button"value=""><spanclass="app-icon">Z</span><spanclass="app-title">Zoeken</span></button></div>
<divclass="app app-small app-sitemanagement"><ahref="#"class="app-link"><spanclass="app-icon">S</span><spanclass="app-title">Sitebeheer</span></a></div><!-- or as a <button> --><divclass="app app-small app-search"><buttonclass="app-link"type="button"><spanclass="app-icon">Z</span><spanclass="app-title">Zoeken</span></button></div>
Sizing and alternatives
The .app-small.app-inverted is also used in the header
<divclass="artifact is-pinned"><divclass="artifact-digit">3</div><divclass="artifact-thumb-cell"><imgsrc="/assets/img/hamburger.jpg"alt=""class="artifact-thumb"/><ahref="#"class="artifact-pin-action"><spanclass="icon icon-pin"aria-hidden="true"></span></a></div><divclass="artifact-body"><ahref="#"class="artifact-link">Juist de behaalde medailles tonen wat beter kan</a><divclass="artifact-meta"><spanclass="icon result-type-article"aria-hidden="true"></span><span>Arno Van Hauwermeiren</span><span>Redactie</span></div></div><divclass="artifact-info"><time>1 uur</time><divclass="artifact-state"><spanclass="icon icon-euro"></span></div><divclass="artifact-actions"><divclass="dropdown dropdown-btn dropdown-btn-small"><inputtype="checkbox"class="dropdown-toggle"id="artifactiddropdown3"/><labelfor="artifactiddropdown3"class="dropdown-toggle-label"id="artifactiddropdown3label"aria-haspopup="true"aria-label="Meer opties"><spanclass="icon icon-triple-mid-dots"aria-hidden="true"></span></label><ulclass="dropdown-menu dropdown-menu-right"aria-labelledby="artifactiddropdown3label"><liclass="dropdown-menu-item"><ahref="#"class="dropdown-menu-link">Maak dossier</a></li><liclass="dropdown-menu-item"><ahref="#"class="dropdown-menu-link">Bewerk artikel</a></li><liclass="dropdown-menu-item"><ahref="#"class="dropdown-menu-link">Maak gratis <spanclass="icon icon-euro"></span></a></li><liclass="dropdown-menu-item"><ahref="#"class="dropdown-menu-link">Meer informatie</a></li></ul></div></div></div></div>
The icon in .result-type represents a type of result. One of ['article', 'column', 'dossier', 'opinie', 'photoalbum', 'poll', 'review', 'verdiepend_artikel', 'video_artikel', 'wire']
Sizing
Rihanna begint veel te laat aan set en krijgt fluitconcert
<divclass="artifact artifact-small"><divclass="artifact-digit">1</div><divclass="artifact-body"><pclass="artifact-title">Rihanna begint veel te laat aan set en krijgt fluitconcert</p></div><divclass="artifact-info"><time>1 uur</time><divclass="artifact-actions"><divclass="dropdown dropdown-btn dropdown-btn-small"><inputtype="checkbox"class="dropdown-toggle"id="smallartifactiddropdown2"/><labelfor="smallartifactiddropdown2"class="dropdown-toggle-label"id="smallartifactiddropdown2label"aria-haspopup="true"aria-label="Meer opties"><spanclass="icon icon-triple-mid-dots"aria-hidden="true"></span></label><ulclass="dropdown-menu dropdown-menu-right"aria-labelledby="smallartifactiddropdown2label"><liclass="dropdown-menu-item"><ahref="#"class="dropdown-menu-link">Verwijder</a></li></ul></div></div></div></div>
Removing interaction
If you want no interaction (hovers and the hidden dropdown) on your artifact, add .artifact-simple.
Rihanna begint veel te laat aan set en krijgt fluitconcert
<divclass="artifact artifact-small artifact-simple"><divclass="artifact-body"><pclass="artifact-title"><spanclass="icon icon-folder"aria-hidden="true"></span> Rihanna begint veel te laat aan set en krijgt fluitconcert</p></div><divclass="artifact-info"><time>1 uur</time></div></div>
Implementation
When implementing it in a list view, please embed the artifacts in a .block-list
If you're implementing a list with drag 'n' drop functionality, please add modifier class .has-dragndrop to .block-list. This fixes some spacing and drag n drop issues.
<olclass="block-list has-dragndrop">
...
</ol>
Badges
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
<divclass="card"><divclass="card-body"><divclass="card-subject"><spanclass="label label-secondary">Kerncentrale</span></div><ahref="#"class="card-link">
Zo reageert de Belgische politiek op president Trump: "Dit is een schok"
</a><divclass="card-footer"><divclass="card-meta">
Roel Wauters en Jonas Muylaert
</div></div></div><divclass="card-aside"><tableclass="card-aside-table"><tbody><tr><td><spanclass="icon icon-check icon-success icon-medium"title="Geredigeerd door eindredactie"></span></td></tr><tr><td><spanclass="label label-online">online</span></td></tr><tr><td><spanclass="label label-print">print</span></td></tr><tr><tdclass="value">Pag. 3</td></tr><tr><td><spanclass="label label-tip">tip</span></td></tr><tr><td><divclass="card-actions"><divclass="dropdown dropdown-btn dropdown-btn-small"><inputtype="checkbox"class="dropdown-toggle"id="card-1-dropdown"/><labelfor="card-1-dropdown"class="dropdown-toggle-label"id="card-1-dropdown-label"aria-haspopup="true"aria-label="Meer opties"><spanclass="icon icon-triple-mid-dots"aria-hidden="true"></span></label><ulclass="dropdown-menu dropdown-menu-right"aria-labelledby="card-1-dropdown-label"><liclass="dropdown-menu-item"><ahref="#"target="_blank"class="dropdown-menu-link">Bewerk artikel</a></li><liclass="dropdown-menu-item"><ahref="#"target="_blank"class="dropdown-menu-link">Status aanpassen</a></li></ul></div></div></td></tr></tbody></table></div></div>
States
The disabled state is for cards that can't be moved.
The changed state is for cards that have been changed in the background. If person Y changes something in the workflow, person X wants to see some visual feedback. Through service workers we place temporary class on the card that has been changed. You have to add or remove (after a certain amount of time) this class yourself through some custom Javascript in your project.
The height is set through JavaScript. This is not included in Bootstrap. It's the initial height of the corresponding card that's being moved.
Dropdowns
Toggleable, contextual menu for displaying lists of links. Made interactive with a input[type="checkbox"] hack. So, no JavaScript required.
Restricted use!
Please avoid the use of .dropdown in a form. Using the native <select> is mandatory.
The custom dropdowns are very prone to bugs, especially on large lists. So we advice you to use the native <select> as much as possible. We won't be fixing any bugs that require a lot of code and mimic default browser behaviour while you can use the built-in version.
Example
Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
Extended dropdowns are dropdowns with a large number of items. The dropdowns are mostly used in Site Management and are placed at the top of the document. Instead of triggering a scrollbar on the page we set its height to be smaller than the viewport (with CSS) and trigger a scrollbar in the dropdown.
We still advice to use the native <select> which automatically adds overflow, will stay in the viewport and has keyboard accessibility.
You can also add classes .disabled or .js-is-disabled to the button but you need to write JS to disable the click action.
Button dropdowns
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Plugin dependency
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap. But that's only for enhanced UX, not for it's core functionality. Our dropdowns still work without JS.
<headerclass="header"><divclass="header-section"><divclass="app app-small app-inverted"><ahref="/"class="app-link"><spanclass="app-icon"aria-hidden="true">
D
</span><spanclass="app-title">
Digital News Room
</span></a></div></div><divclass="header-section"><divclass="header-title"><h1class="header-title-inner">
Digital News Room
</h1></div></div><divclass="header-section"><divclass="dropdown dropdown-block"><inputtype="checkbox"class="dropdown-toggle"id="usermenu"/><labelfor="usermenu"class="dropdown-field dropdown-field-no-border"id="usermenulabel"aria-haspopup="true"aria-expanded="false"role="button">Jochen Vandendriessche senior<spanclass="caret"></span></label><ulclass="dropdown-menu dropdown-menu-right"aria-labelledby="usermenulabel"><liclass="dropdown-menu-item"><ahref="#"class="dropdown-menu-link">Afmelden</a></li></ul></div></div></header>
HTML5 requirements
According to the HTML5 spec, when using <header> you must use at least one of <h1> … <h6> inside.
Icons
Custom designed iconfont for DNR. We created the font through Icomoon.io
icon-bell
icon-copy
icon-clipboard
icon-clock
icon-cloud-upload
icon-cloud-download
icon-document
icon-lock
icon-user
icon-monitor
icon-paper
icon-recipe
icon-align-center
icon-align-left
icon-align-right
icon-bold
icon-bubble
icon-bulb
icon-calendar
icon-caret-down
icon-caret-up
icon-check
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-close
icon-cloud
icon-embed-code
icon-envelope
icon-eraser
icon-euro
icon-facebook
icon-factfile
icon-floppy-disk
icon-focuspoint
icon-folder
icon-forbidden
icon-glasses
icon-grid-large
icon-grid-small
icon-hidden
icon-image
icon-instagram
icon-italic
icon-link
icon-live
icon-omega
icon-paywall
icon-pencil
icon-phone
icon-pin
icon-plus-circle
icon-plus
icon-pointer
icon-poll
icon-quote-left
icon-quote-right
icon-redo
icon-search
icon-shout
icon-sixdots
icon-soundcloud
icon-spinner
icon-spotify
icon-star
icon-strikethrough
icon-subscript
icon-superscript
icon-tag
icon-thumbs-list
icon-trash
icon-triple-mid-dots
icon-twitter
icon-underline
icon-undo
icon-unlink
icon-video
icon-insert-template
icon-clipboard-markup
icon-newspaper
icon-tablet
icon-information
Adjusting the font
If you need to make adjustments, upload the selection.json from /fonts/icons/DNRICON to Icomoon. Make your changes and download the altered font. Replace the oldselection.json with the new one that's included in the download
How to use
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
<spanclass="icon icon-image"></span>
Don't mix with other components
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
Only for use on empty elements
Icon classes should only be used on elements that contain no text content and have no child elements.
Accessible icons
Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.
If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.
An icon used in an alert to convey that it's an error message, with additional .sr-only text to convey this hint to users of assistive technologies.
Error:
Enter a valid email address
<divclass="alert alert-danger"role="alert"><spanclass="icon icon-close"aria-hidden="true"></span><spanclass="sr-only">Error:</span>
Enter a valid email address
</div>
Sizing
If you need to size the icon, please use any value that's a multiple of 16. The grid on which the icons are designed is a 32x32 pixel grid. This way you get crispy results.
We have some helper classes (e.g. .icon-2x) to size the icons.
<spanclass="icon icon-calendar"></span><spanclass="icon icon-calendar icon-2x"></span><spanclass="icon icon-calendar icon-3x"></span><spanclass="icon icon-calendar icon-4x"></span><spanclass="icon icon-calendar icon-5x"></span><!-- smaller versios - use with caution, may result in blurry icons --><spanclass="icon icon-calendar icon-medium"></span><spanclass="icon icon-calendar icon-small"></span>
Fixed width
Use .icon-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
Confirm
Twitter
Search
Trash
<spanclass="icon icon-twitter icon-fw"></span>
Colored icons
By default icons inherit the color of the font of the parent element.
Although we prefer styling (coloring) the icons through css in your module you can add modifier classes to give a state color.
Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.
List group
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Basic example
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ulclass="list-group"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>
Only horizontal borders
Only top and bottom borders on the list items. Left and right padding is also removed.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ulclass="list-group list-group-horz-borders"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>
Badges
Add the badges component to any list group item and it will automatically be positioned on the right.
.logo-small is 15px high and variable width, while .logo-medium is 20px high.
Logo accessibility
Please keep accessibilty in mind and provide additional attributes or elements.
<!-- make it readable (meaningful) by screenreaders --><divclass="logo logo-demorgen logo-small"><spanclass="sr-only">DeMorgen</span></div><!-- if the logo is purely for presentational purposes and doesn't need to be read by screenreaders --><divclass="logo logo-demorgen logo-small"role="presentation"></div><!-- or ... --><divclass="logo logo-demorgen logo-small"aria-hidden="true"></div>
With aria-hidden="true" the element MAY NOT contain any other children, because they won't be visible for assistive technologies.
Media picker
The media-picker component usually works in conjunction with the Results component.
Sizing is normally done by toggling checkboxes in the Results component, but for demonstrational purposes we used modifier classes. If you want non-togglable media-pickers you can use these modifier classes.
Small .media-picker-small
Row .media-picker-row
Notes
Notes are reminders and remarks in the sidebar of the editors.
ontwerpen en zet nu het parlement buitenspel door te vragen dat ze in amper twee weken besproken en gestemd worden. De spoedbehandeling is totaal ongepast en het is gevaarlijk dat het parlement zich daartoe leent.” AI roept de parlementsleden dan ook op zich te bezinnen vooraleer ze de wetten nog voor het zomerreces stemmen.
Kan iemand hier nog een paar leuke foto’s aan toevoegen? Die van Clinton lijkt nergens naar!
<divclass="notes"><olclass="notes-list fjs-scroll-to-bottom"><liclass="notes-item"><divclass="note"><divclass="note-body">ontwerpen en zet nu het parlement buitenspel door te vragen dat ze in amper twee weken besproken en gestemd worden. De spoedbehandeling is totaal ongepast en het is gevaarlijk dat het parlement zich daartoe leent.” AI roept de parlementsleden dan ook op zich te bezinnen vooraleer ze de wetten nog voor het zomerreces stemmen.</div><divclass="note-footer"><spanclass="note-footer-meta">Peter Evergem</span><timeclass="note-footer-meta-timestamp">Woe 25/01/2017 10u45</time></div></div></li><liclass="notes-item"><divclass="note"><divclass="note-body">Kan iemand hier nog een paar leuke foto’s aan toevoegen? Die van Clinton lijkt nergens naar!</div><divclass="note-footer"><spanclass="note-footer-meta">Evelien Maes</span><timeclass="note-footer-meta-timestamp">Woe 25/01/2017 12u45</time></div></div></li></ol><formaction=""method=""class="notes-form"><inputvalue=""type="text"class="form-control"placeholder="Voeg een notitie toe…"/><divclass="form-footer form-footer-hidden-js"><buttonclass="btn btn-primary"type="submit">Verzenden</button></div></form></div>
The .fjs-scroll-to-bottom class will make the notes scroll to the last one (at the bottom).
Clean slate state
Clean slate for when there are no notes yet.
Er zijn nog geen notities
<divclass="notes">
...
<divclass="note note-cleanslate"><divclass="note-body">Er zijn nog geen notities</div></div>
...
</div>
Pagination
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Default pagination
Pagination is being used in order to ensure quick performance of an application. It allows a quick loading of a page, and if the user wants to see more items or results, they can be found on the subsequent pages.
Maximum items
We show a maximum of 7 page numbers per pagination. The page number before & the page number after the currenly selected page are always displayed. The first and the last page is always displayed. The pages in between are represented by 3 dots "…"
<navclass="pagination"><ulclass="pagination-wrapper"><liclass="pagination-arrow pagination-arrow-previous"><ahref="#"class="pagination-link">Vorige</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">1</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">…</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">14</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">15</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">16</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">…</a></li><liclass="pagination-item"><aclass="pagination-link"href="#">25</a></li><liclass="pagination-arrow pagination-arrow-next"><ahref="#"class="pagination-link">Volgende</a></li></ul><divclass="pagination-range"><spanclass="pagination-range-from-to">25 tot 50</span> van <spanclass="pagination-range-total">25461</span></div></nav>
Disabled and active states
Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
You can optionally swap out active or disabled anchors for <span class="pagination-dummy">, to remove click functionality while retaining intended styles.
Previous button: only shown when there is a previous page (so not on the first page). Next button: only shown when there is a next page (so will not be shown on last page)
Short list
When there are less than 7 result pages ...
Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Basic example
By default, all the .panel does is apply some basic border and padding to contain some content.
Basic panel example
<divclass="panel panel-default"><divclass="panel-body">
Basic panel example
</div></div>
Panel with heading
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.
For proper link coloring, be sure to place links in headings within .panel-title.
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Make panels togglable so you can open or close them.
With the checked="checked" attribute on the checkbox you can
open the panel.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla autem ducimus aliquid eveniet id amet, quod labore eligendi voluptates itaque tempora, quo accusamus ratione exercitationem saepe deleniti dolorem inventore ipsum! Blanditiis quo sit, ipsa exercitationem magni dolor commodi nemo iusto nesciunt provident delectus odio quas est suscipit nostrum id. Voluptate!
<divclass="panel panel-default panel-togglable"><inputtype="checkbox"class="panel-trigger"id="panelXtrigger"checked="checked"/><labelfor="panelXtrigger"class="panel-trigger-label panel-heading"aria-label="Klik om dit paneel te openen of sluiten"><spanclass="icon"aria-hidden="true"></span><h4class="panel-title">Zoekresultaten <spanclass="badge badge-primary">223</span></h4></label><divclass="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla autem ducimus aliquid eveniet id amet, quod labore eligendi voluptates itaque tempora, quo accusamus ratione exercitationem saepe deleniti dolorem inventore ipsum! Blanditiis quo sit, ipsa exercitationem magni dolor commodi nemo iusto nesciunt provident delectus odio quas est suscipit nostrum id. Voluptate!</div></div>
Panel body without padding
If for some reason you need a .panel-body without padding, add .panel-body-no-padding to .panel-body.
Progress bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Cross-browser compatibility
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
Content Security Policy (CSP) compatibility
If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline', then you won't be able to use inline style attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width) or using custom CSS classes.
In addition to the animated version we also offer a "automated" progress bar. It's use case is providing a visual feedback when clicking a button with an action like "Saving" or likewise.
Saving in progress
<divclass="progress progress-small progress-automated"><divclass="progress-bar "role="progressbar"role="presentation"><spanclass="sr-only">Saving in progress</span></div></div>
Be creative with this and combine it with animated buttons to give the user some usefull feedback on an action like "Saving".
Stacked
Place multiple bars into the same .progress to stack them.
The Results component usually works in conjunction with the Media picker component. This way you can toggle the different states of the media-picker component. See a live example.
For a layout with white borders and a header without box-shadow, add .layout-alt to <html class="">
Tabs
Tabs purely with html and css, no JavaScript required. Flexbox to the rescue!
Active states are styled using the :checked pseudo selector on the input[type="radio"] and the adjacent sibling combinator .tabs-trigger:checked + .tabs-label {...}.
Primary tabs
Add quick, dynamic tab functionality to transition through panes of local content.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
A darker version
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Markup
Check your code
Please pay attention to the following.
id's of the input[type="radio"] and the for="" attribute of the label must match.
All input[type="radio"] must have the same name="" value
Also make sure you don't have any duplicate id's and no duplicate name="" values on other tabs components in the page
Please add the WAI-ARIA attributes for improved accessibility
Component that looks like regular tabs, but it's actually a list of links. We use them on the shell to control the iframes.
Why don't we use regular tabs for this? Because with regular tabs we would load (on page load) all the content of each pane (a complete webpage in an iframe) and that would be overkill.
You need JS to visualize the active state of the faux tabs. Toggle the class .js-is-active on .tabs-link
Tags
Removable element linked to a predefined category (mediatopic or entity). The element occurs when an item is selected from the list after typing a word and when a single predefined category is found corresponding to the word.
