Breadcrumbs

Pagination

Aligin

Full width

Centred

Pager

Badges

Styles

Dot style

Colors

Sizes

Progress Bar

Star raiting

Responsive video

Social icons

Only icons

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

With label

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

Sizes

• Facebook
• Google plus
• Instagram
• Odnoklassniki
• Telegram
• Twitter
• Viber
• Vkontakte
• WhatsApp
• YouTube

Tabs

Colors

Aligin

Expanded

Scrollable

Modal windows

Accordion

Multiple mode

Add data-accordion-mode="multiple" attribute to accordion

Dropdown

Spoiler

Toggle spoiler

Tooltips

From attribute

Placements

Placement right  Placement left  Placement top  Placement bottom

Themes

Light theme  Dark theme

Custom events

On focus

HTML content

HTML content

Notifications

Example

• Create notification board

  const notificationBoard = new Notification({
  	delay: 40000
  });
  

• Create and show notification message

  const button = document.querySelector("button");
  button.addEventListener("click", () => {
  	notificationBoard.show("Short test message", {
  		className: "notification_type_info"
  	});
  });
  

Options

Notification

• delay
  Delay for closing event in milliseconds (ms).
  • Type:number
  • Default:3000
• containerClassName
  Notification board container class name
  • Type:string
  • Default:"notification-container"
• containerItemClassName
  Notification board container item class name
  • Type:string
  • Default:"notification-container__item"

NotificationItem

• delay
  Delay for closing event in milliseconds (ms).
  • Type:number
  • Default:3000
• close
  Show close button when true
  • Type:bollean
  • Default:true
• className
  Custom class/classes name added to notification item
  • Type:string
  • Default:""
• containerClassName
  Notificiation item container class name
  • Type:string
  • Default:"notification"
• disappearClassName
  Class name added when notification disappear
  • Type:string
  • Default:"notification_disappear"
• closeClassName
  Class name to close button
  • Type:string
  • Default:"notification__close"
• messageClassName
  Class name added to message
  • Type:string
  • Default:"notification__message"

Svg Icons

The build system automatically creates a sprite from the svg files in the folder source/icons

Avatars

Styles

Sizes

Initals

Colors

Media object

"Media object" module helper for easily creating blocks with text and image, like comments, any lists and etc.

Example usage in `comment` module

Top

Center

Bottom

Spinner

Styles

Inherited

Sizes

Colors

Card

Colors

Hover

Scale

Link

Sizes

Media

Header and footer

Bordered