Code Snippets

For the MongKok Template

Code Snippets

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci. Qui, placeat, minima molestiae at harum porro commodi architecto amet mollitia ad sint nostrum dolor tempore vero?

Rerum placeat doloribus temporibus. Temporibus, quae, dolorum, sunt laudantium ad delectus consectetur maxime iste asperiores ut ex dicta corporis earum est consequatur? Suscipit, unde, atque fugiat dolor recusandae corporis neque voluptatibus nisi excepturi praesentium accusantium cupiditate sed aliquam quasi placeat eum ut voluptate. Nulla?

Paragraph with Drop Cap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci. Qui, placeat, minima molestiae at harum porro commodi architecto amet mollitia ad sint nostrum dolor tempore vero? Quia, error velit nobis incidunt est quaerat harum tempore illo. Maxime perferendis quam possimus eligendi voluptas assumenda mollitia dignissimos culpa doloremque provident! Est, sunt, accusantium, expedita, animi voluptatum eaque blanditiis eligendi nemo deserunt illum atque necessitatibus possimus laudantium totam facilis repudiandae quia vero aut.

Paragraph with Image On the Left

Figure 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci. Qui, placeat, minima molestiae at harum porro commodi architecto amet mollitia ad sint nostrum dolor tempore vero?

Rerum placeat doloribus temporibus. Temporibus, quae, dolorum, sunt laudantium ad delectus consectetur maxime iste asperiores ut ex dicta corporis earum est consequatur? Suscipit, unde, atque fugiat dolor recusandae corporis neque voluptatibus nisi excepturi praesentium accusantium cupiditate sed aliquam quasi placeat eum ut voluptate. Nulla? Nostrum exercitationem distinctio rem temporibus doloribus voluptatem maxime at cupiditate eaque delectus amet veritatis quod nobis quam aliquam ipsa!

Paragraph with Image On the Right

Figure 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci. Qui, placeat, minima molestiae at harum porro commodi architecto amet mollitia ad sint nostrum dolor tempore vero?

Rerum placeat doloribus temporibus. Temporibus, quae, dolorum, sunt laudantium ad delectus consectetur maxime iste asperiores ut ex dicta corporis earum est consequatur? Suscipit, unde, atque fugiat dolor recusandae corporis neque voluptatibus nisi excepturi praesentium accusantium cupiditate sed aliquam quasi placeat eum ut voluptate. Nulla? Nostrum exercitationem distinctio rem temporibus doloribus voluptatem maxime at cupiditate eaque delectus amet veritatis quod nobis quam aliquam ipsa!

Paragraph with Image in the Middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci. Qui, placeat, minima molestiae at harum porro commodi architecto amet mollitia ad sint nostrum dolor tempore vero?

Figure 3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci.

Rerum placeat doloribus temporibus. Temporibus, quae, dolorum, sunt laudantium ad delectus consectetur maxime iste asperiores ut ex dicta corporis earum est consequatur? Suscipit, unde, atque fugiat dolor recusandae corporis neque voluptatibus nisi excepturi praesentium accusantium cupiditate sed aliquam quasi placeat eum ut voluptate. Nulla? Nostrum exercitationem distinctio rem temporibus doloribus voluptatem maxime at cupiditate eaque delectus amet veritatis quod nobis quam aliquam ipsa!

Single Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quo velit id adipisci. Qui, placeat, minima molestiae at harum porro commodi architecto amet mollitia ad sint nostrum dolor tempore vero?

1/2 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, labore, doloremque ducimus harum magni saepe in eveniet commodi explicabo neque et repudiandae necessitatibus optio fugit omnis cum minima fuga iste!

1/2 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quae quia iste temporibus minima beatae sequi aperiam vitae rerum dignissimos. Aliquam, adipisci incidunt culpa ex nobis totam in amet temporibus.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, labore, doloremque ducimus harum magni saepe in eveniet commodi explicabo neque et repudiandae necessitatibus optio fugit omnis cum minima fuga iste!

2/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quae quia iste temporibus minima beatae sequi aperiam vitae rerum dignissimos. Aliquam, adipisci incidunt culpa ex nobis totam in amet temporibus.

2/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, labore, doloremque ducimus harum magni saepe in eveniet commodi explicabo neque et repudiandae necessitatibus optio fugit omnis cum minima fuga iste!

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quae quia iste temporibus minima beatae sequi aperiam vitae rerum dignissimos. Aliquam, adipisci incidunt culpa ex nobis totam in amet temporibus.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, labore, doloremque ducimus harum magni saepe in eveniet commodi explicabo neque et repudiandae necessitatibus optio fugit omnis cum minima fuga iste!

1/12 Offset + 7/12 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quae quia iste temporibus minima beatae sequi aperiam vitae rerum dignissimos. Aliquam, adipisci incidunt culpa ex nobis totam in amet temporibus.

7/12 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, labore, doloremque ducimus harum magni saepe in eveniet commodi explicabo neque et repudiandae necessitatibus optio fugit omnis cum minima fuga iste!

1/12 Offset + 1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quae quia iste temporibus minima beatae sequi aperiam vitae rerum dignissimos. Aliquam, adipisci incidunt culpa ex nobis totam in amet temporibus.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, labore, doloremque ducimus harum magni saepe in eveniet commodi explicabo neque et repudiandae necessitatibus optio fugit omnis cum minima fuga iste!

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quae quia iste temporibus minima beatae sequi aperiam vitae rerum dignissimos. Aliquam, adipisci incidunt culpa ex nobis totam in amet temporibus.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ullam ab amet unde libero quis facere fuga similique ad consequatur? Blanditiis tenetur suscipit veritatis. Harum, eveniet nesciunt consectetur in sed!

Code Block

<!DOCTYPE html>
	<html>
	<head>
	<title>Title of the document</title>
	</head>

	<body>
	The content of the document......
	</body>

	</html>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, non, cumque, aspernatur nihil ducimus aliquam commodi sequi similique quaerat ullam maxime facilis placeat officia aut amet quisquam odit nobis nam. Eveniet, provident, nemo ad praesentium totam culpa optio atque modi officia veritatis ipsam quae tempora neque doloribus enim voluptates laudantium incidunt itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, maiores omnis facere optio ad distinctio ipsam. Debitis, ipsa, fugiat iste maiores nisi exercitationem alias incidunt. Fugiat, quidem facilis ad incidunt!

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, natus, laudantium veritatis quaerat ducimus aliquid praesentium repudiandae aperiam ea optio numquam et quis beatae eligendi hic cum laboriosam molestiae! Suscipit? Optio, suscipit soluta voluptatum obcaecati atque veritatis vel perspiciatis asperiores eius aperiam? Dolorem, inventore corrupti at excepturi eveniet voluptate libero laborum unde!

Headings

H1

H2

H2 with Styling

H3

H3 with Styling

H4

H5
H6

Buttons

Link

Basic Styling

Body Text

Strong

Underlined

Superscript

Subscript

Emphasis

Upper Case

1px Letter Spacing

Footnote Size Text

Link

Title Font

Title Font with Title Font Weight

Title Text Color

Title Style

Signature

Ticker Text 1

Ticker Text 2

Ticker Text 3

Ticker Text 4

Ticker Text (Duration: 2s)

Ticker Text (Duration: 3s)

Ticker Text (Duration: 4s)

Ticker Text (Duration: 5s)

Span Text

Tag (Block)

Link Tag (Block)

Tag (Inline Block)

Link Tag (Inline Block)

Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, a, explicabo perferendis dolorum eum quis tempora minus fuga voluptatum illo repellendus saepe nulla hic beatae recusandae nobis nesciunt. Aperiam, neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, esse, ad, aperiam, dolorem quisquam nobis quaerat blanditiis ullam error officiis doloribus unde facilis magnam praesentium reiciendis repellendus eos pariatur eaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, eos, aliquam explicabo non nisi quos in id vitae provident tempore odio nemo ullam asperiores alias expedita nostrum ducimus voluptatum commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, aut, totam, veritatis accusantium nobis sequi nam id placeat quam cumque iste itaque repudiandae aspernatur adipisci architecto assumenda harum ex magni.

Accordion

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

List Styles

  • Item Title

    Items in this list has a bottom margin of 40px.

  • Item Title

    Items in this list has a bottom margin of 40px.

  • Item Title

    Items in this list has a bottom margin of 40px.

  • Item Title

    Items in this list has a bottom margin of 20px.

  • Item Title

    Items in this list has a bottom margin of 20px.

  • Item Title

    Items in this list has a bottom margin of 20px.

Definition List Title
Definition List Definition
Definition List Title
Definition List Definition
Definition List Title
Definition List Definition
  • Unordered List Style
  • Unordered List Style
  • Unordered List Style
  1. Ordered List Style
  2. Ordered List Style
  3. Ordered List Style

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

CSS Books

Lorem Ipsum Dolor Sit Amet

Preview

Buy from Amazon.com

Bar Chart

App
50
Boy
60
Cat
70
Dog
80
Egg
90
Fish
100

Pie Chart

App
50
Boy
60
Cat
70
Dog
80
Egg
90
Fish
100

Donut Chart

App
50
Boy
60
Cat
70
Dog
80
Egg
90
Fish
100

Progress Chart

App
5
Boy
6
Cat
7
Dog
8
Egg
9
Fish
10

Image

... ... ...

Lightboxes

Image, Youtube Video, Vimeo Video, Webpage

Image in Lightbox Youtube Video in Lightbox Vimeo Video in Lightbox Webpage in Lightbox

Social Icons