Modifiers	Values	Description
`size`	`h1h2h3h4h5h6`	Headings sizes

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Regular text

Modifiers	Values	Description
`display`	`inlineblock`	Display text as an inline element or as a block element i.e. a paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry

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.

Horizontal line

Modifiers	Values	Description
`color`	`blackwhite`	Line color

Modifiers	Values	Description
`style`	`orderedunordered`	List style

Fruit
- Bananas
- Apples
  - Green
  - Red
- Pears
Vegetables
Meat

Modifiers	Values	Description
`anchor`	—	Anchor link. Adds small anchor icon after link

Click me, I'm a regular link!Click me, I'm an anchor link!

Modifiers	Values	Description
`display`	`blockinline`	Display code as a line or as a block

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum console.log( a ); it was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

window.addEventListener( 'load', () => {
  console.log('Ready');
})}

Modifiers	Values	Description
`theme`	`default`	Color theme

Big type, even huge type, can be beautiful and useful. But poise is usually far more important than size – and poise consists primarily of emptiness. Typographically, poise is made of white&space.

Robert Bringhurst — The Elements of Typographic Style

Raster image

Modifiers	Values	Description
`theme`	`black`	Put image into black frame

Ships in the Field — 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.

SVG image. "img-svg" component can be implemented in one of three ways, see details in README.md on github

Modifiers	Values	Description
`bg`	—	Use SVG as background-image

Embeded content (youtube videos, ...)

Modifiers	Values	Description
`ratio`	`4x3`	Aspect ratio

Fullscreen background

Modifiers	Values	Description
`color`	`blackwhite`	Background color
`img`	—	Full screen background image

Simple responsive grid

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website

Heading One Billions upon bil lions upon billions

Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Visit Website

Grid layout example. Use it as a starting point for building your own page layout, it is not a "ready-to-use" type of component

News. Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Weather

Article. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Info

Space R

Space L

Grid layout example. Use it as a starting point for building your own page layout, it is not a "ready-to-use" type of component

One

Two

Three

Four

Five

Grid gallery

This is a service type of blog that defines styles for the whole page. It is already assigned to the necessary elements (<html> and <body>) in PUG templates, so don't modify or delete any 'page'-related classes. Also, this is the block, through which we import all custom fonts making them available in all SASS files

Modifiers	Values	Description
`bg`	`solidgradientimg`	(apply to 'page__body' element) Apllies fixed background to the full page height

Modifiers	Values	Description
`theme`	`documentationlight`	Aspect ratio

Table 1.1 Playlist
Date	Artist	Title	Album	Label	Genres	Duration
1971	Gil Scott-Heron	Save The Children	Pieces Of A Man	Flying Dutchman	Soul, Funk, Jazz	4:55
1975	Rufus Featuring Chaka Khan	Sweet Thing	Rufus Featuring Chaka Khan	ABC Records	Soul, Funk, Disco	3:18
1994	Adam F ‎	Sea Of Destiny	Stronger Than Ever	Lucky Spin Recordings	Jungle, Drum'n'Bass	6:47
2000	Soulsearcher ‎	Can't Get Enough (Vocal Club Mix)	Various ‎- Disco Kandi	Hed Kandi	Garage House, Disco	7:19

Responsive lightbox gallery

Back to top button

Button

Modifiers	Values	Description
`theme`	`blackempty`	Button color theme

a link a link

Modifiers	Values	Description
`theme`	`blackwhite`	Badge

NEW!NEW!

Modifiers	Values	Description
`theme`	`blackwhite`	Clickable label

Recursion Callback Prototypes

«1 2 3 4 »

Comment section

Mike Wolfsonaugust 19, 2019 17:48

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

Reply

Mike Wolfsonaugust 19, 2019 17:48

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

Reply

Mike Wolfsonaugust 19, 2019 17:48

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

Reply

Custom select box. Populate the select menu with items from array or JSON file. Selected option cached in localStorage

Hamburger menu. Populate the menu with items from plain JavaScript object or JSON file

Modal window

Social media icons

Modifiers	Values	Description
`size`	`smmdlg`	Size of icons
`color`	`githubfacebookinstagramodnoklassnikitelegramtwitteryoutubevkontakteblackwhite`	Color of icons

Custom controls

Modifiers	Values	Description
`checkbox`	—	Custom checkbox
`radio`	—	Custom radio button
`switch`	—	Switch
`validation`	—	Validation
`disabled`	—	Disabled state

Milk

Text text text

Milk

Teip text Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Milk

Teip text Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?

Milk

Text text text

Milk

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Milk

Text text text

Milk

Lorem Ipsum is 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

Milk

Lorem Ipsum is 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

Milk

Lorem Ipsum is 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

Grid-based layout for forms

Form group

Modifiers	Values	Description
`type`	`textareasearch`	Applies to "form-group__input"
`row`	—	Applies to "form-group"
`disabled`	—	Applies to "form-group"
`validation`	`errorsuccess`	Applies to "form-group"

A long sentence you're forced to read to understand what this stupid form wants from you