| Base
| This component provides the default style for all HTML elements. |
Ready |
| Print
| Optimize your pages for legible and economic printing. |
Ready |
| Aspect Ratio
| This component allows you to force an element's size to adhere to a specific ratio. |
Beta |
| Card
| Create layout boxes with different styles. |
Ready |
| Container
| This component allows you to align and center your page content. |
Ready |
| Grid
| Create a fully responsive, fluid and nestable grid layout. |
Ready |
| Section
| Create horizontal layout sections with different background colors and styles. |
Ready |
| Tile
| Create layout boxes with different backgrounds that can be arranged seamlessly next to each other. |
Ready |
| Accordion
| Create a list of items that can be shown individually by clicking an item's header. |
Ready |
| Arrow
| Add arrows to other components. |
Beta |
| Article
| Create articles within your page. |
Ready |
| Badge
| Easily create nice looking notification badges. |
Ready |
| Button
| Buttons are used to signal actions, submit forms, or trigger new content within the current context. |
Ready |
| Chart
| Create flexible charts and graphs. |
Beta |
| Close
| Create a close icon that can be combined with different components. |
Ready |
| Comment
| Includes styles for comments, for example for a blog section on your site. |
Ready |
| Countdown
| Create a simple countdown timer. |
Ready |
| Description list
| Easily create nice looking description lists, which come in different styles. |
Ready |
| Divider
| Create dividers to separate content and apply different styles to them. |
Ready |
| Drop
| Position any element in relation to another element. |
Ready |
| Dropdown
| Defines different styles for a toggleable dropdown. |
Ready |
| Filter
| Filter or sort items in any given layout by metadata. |
Ready |
| Heading
| Define different styles for headings. |
Ready |
| Icon
| Place scalable vector icons anywhere in your content. |
Ready |
| Image
| Speed up page loading times and decrease traffic by only loading images as they enter the viewport. |
Ready |
| Label
| Indicate important notes and highlight parts of your content. |
Ready |
| Leader
| Create dot leaders for pricing menus or tables of contents. |
Ready |
| Line
| Add horizontal or vertical line to other components. |
Beta |
| Link
| Define different styles to integrate links into specific content. |
Ready |
| List
| Easily create nice looking lists, which come in different styles. |
Ready |
| Offcanvas
| Create an off-canvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations. |
Ready |
| Parallax
| Animate CSS properties depending on the scroll position of the document. |
Ready |
| Player
| A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. |
Beta |
| Rating
| Display a star rating. |
Beta |
| Scroll
| Scroll smoothly when jumping to different sections on a page. |
Ready |
| Scrollspy
| Trigger events and animations while scrolling your page. |
Ready |
| Search
| Easily create a nice looking search. |
Ready |
| Slider
| Create a responsive carousel slider. |
Ready |
| Slideshow
| Create a responsive slideshow with images and videos. |
Ready |
| Social
| Add social media colors to icons and buttons. |
Beta |
| Sortable
| Create sortable grids and lists to rearrange the order of its elements. |
Ready |
| Stepper
| Steppers indicate progress of a sequence of steps. |
Beta |
| Sticky
| Make elements remain at the top of the viewport, like a sticky navigation. |
Ready |
| Switcher
| Dynamically transition through different content panes. |
Ready |
| Table
| Tables are used to display tabular data in rows and columns. |
Ready |
| Toggle
| Hide, switch or change the appearance of different contents through a toggle. |
Ready |
| Totop
| Create a simple to-top scroller. |
Ready |
| Video
| Start playing videos as they are shown or enter the viewport. |
Ready |
| Form
| Easily create nice looking forms with different styles and layouts. |
Ready |
| Placeholder
| Create a placeholder space that can be used for uploading files via drag and drop. |
Ready |
| Upload
| Upload files through a file input form element or a placeholder area. |
Ready |
| Breadcrumb
| Create breadcrumbs to show users their location within a website. |
Beta |
| Dotnav
| Create a dot navigation to operate slideshows or to scroll to different page sections. |
Ready |
| Iconnav
| Create a navigation consisting of icons. |
Ready |
| Nav
| Defines different styles for list navigations. |
Ready |
| Navbar
| Create a navigation bar that can be used for your main site navigation. |
Ready |
| Pagination
| Easily create a nice looking pagination to navigate through pages. |
Ready |
| Slidenav
| Defines a navigation with previous and next buttons to flip through slideshows. |
Ready |
| Subnav
| Defines different styles for a sub navigation. |
Ready |
| Tab
| Create a tabbed navigation with different styles. |
Ready |
| Thumbnav
| Create a flexible thumbnail navigation. |
Ready |
| Alert
| Display info, success, warning and error messages. |
Ready |
| Lightbox
| Create a responsive lightbox gallery with images and videos. |
Ready |
| Marker
| Create a marker icon that can be displayed on top of images. |
Ready |
| Modal
| Create modal dialogs with different styles and transitions. |
Ready |
| Notification
| Create toggleable notifications that fade out automatically. |
Ready |
| Overlay
| Create an image overlay, which comes in different styles. |
Ready |
| Progress
| Defines progress bars that indicate how far along a process is. |
Ready |
| Spinner
| Create an animated loading spinner. |
Ready |
| Tooltip
| Easily create a nice looking tooltip. |
Ready |
| Align
| Control the alignment of inline elements depending on the viewport size. |
Ready |
| Animation
| A collection of smooth animations to use within your page. |
Ready |
| Background
| A collection of utility classes to add different backgrounds to elements. |
Ready |
| Border
| Add or remove a border to any or all sides of an element. |
Beta |
| Column
| Display your content in multiple text columns without having to split it in several containers. |
Ready |
| Cover
| Expand images, videos or iframes to cover their entire container and place your own content on top. |
Ready |
| Flex
| Utilize the power of flexbox to create a wide range of layouts. |
Ready |
| Height
| Define the height of elements depending on the viewport or match the heights of different elements. |
Ready |
| Inverse
| Inverse the style of any component for light or dark backgrounds. |
Ready |
| Margin
| A collection of utility classes to add spacing between elements. |
Ready |
| Padding
| A collection of utility classes to add spacing between elements and their content. |
Ready |
| Position
| A collection of utility classes to position content. |
Ready |
| SVG
| Inject inline SVG images into the page markup and style them with CSS. |
Ready |
| Text
| A collection of utility classes to style text. |
Ready |
| Transition
| Create smooth transitions between two states when hovering an element. |
Ready |
| Utility
| A collection of useful utility classes to style your content. |
Ready |
| Visibility
| Use responsive visibility classes to display or hide elements on different devices. |
Ready |
| Width
| Define the width of elements for different viewport sizes. |
Ready |
| Z-index
| These utility classes let you easily change the z-index of an element. |
Ready |