Headings

h1. Level 1

h2. Level 2

h3. Level 3

h4. Level 4

{ block : 'heading', content : 'h1. Level 1' },
{ block : 'heading', lvl : 2, content : 'h2. Level 2' },
{ block : 'heading', lvl : 3, content : 'h3. Level 3' },
{ block : 'heading', lvl : 4, content : 'h4. Level 4' }

Headings sizes writed in rem and uses auto calculating for pretty view.You can customize sizes and math model in variables block.

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

nbLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

{
   block : 'paragraph',
   mods : { type : 'lead' },
   content : [
       'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ',
       'Aenean commodo ligula eget dolor. Aenean massa. ',
       'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ',
       'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ',
       'Nulla consequat massa quis enim.'
   ]
},
{
   block : 'paragraph',
   content : [
       'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ',
       'Aenean commodo ligula eget dolor. Aenean massa. ',
       'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ',
       'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ',
       'Nulla consequat massa quis enim.'
   ]
},
{
   block : 'paragraph',
   mods : { type : 'marked' },
   mark : 'nb',
   content : [
       'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ',
       'Aenean commodo ligula eget dolor. Aenean massa. ',
       'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ',
       'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ',
       'Nulla consequat massa quis enim.'
   ]
}

Paragraphs sizes also customizable

Lists

  • item 1
  • item 2
  1. ordered item 1
  2. ordered item 2
  • item 1
  • item 2
    • nested item 1
    • nested item 2
{
   block : 'list',
   items: [
       'item 1',
       'item 2'
   ]
},
{
   block : 'list',
   mods : { type: 'ordered' },
   items: [
       'ordered item 1',       'ordered item 2'   ]
},
{
   block : 'list',
   items: [
       'item 1',
       [
           'item 2'
           {
               block : 'list',
               items: [
                   'nested item 1',
                   'nested item 2'
               ]
           }
       ]
   ]
}

BEM Content library add wrapper for image for caption writing and HTML5 semantic

Images

This is BEM logo caption
{
   block : 'image',
   url : '//raw.githubusercontent.com/bem/bem-identity/master/sign/sign.png'},
{
   block : 'image',
   mods : { wrap : true },
   url : '//raw.githubusercontent.com/bem/bem-identity/master/sign/sign.png',
   caption : 'This is BEM logo caption',
   width : '60px',
   height: '50px'
}

BEM Content library add wrapper for image for caption writing and pretty HTML5 semantic.

Sources

function test() {
    return 'false';
}
function test() {
    return 'false';
}
Source with caption
{
   block : 'source',
   mods : { lang : 'js', theme : 'github' },
   content : [
       'function test() {\n',
       '    return \'false\';\n',
       '}'
   ]
},
{
   block : 'source',
   caption : 'Source with caption',
   mods : { lang : 'js', theme : 'github' },
   content : [
       'function test() {\n',
       '    return \'false\';\n',
       '}'
   ]
}

Blockquotes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Anton Winogradov
{
   block : 'blockquote',
   content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
},
{
   block : 'blockquote',
   source : 'Anton Winogradov',
   content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
}