We use cookies to ensure you get the best experience on our website
Startsida Utforska Hjälp
Registrera dig Logga in
0ct0pu5
/
bulma
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: aa8bbfeb89
Grenar Taggar
bulma
/
docs
/
versions
/
0.5.2
/
documentation
/
layout
/
tiles
/
index.html

index.html 87 KB
Historik Rå

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en" class="route-documentation">
    3. 

  3.   <head>
    4. 

  4.   <meta charset="utf-8">
    5. 

  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
    7. 

  7.   <meta name="description" content="Bulma v0.5.2 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
    8. 

  8. 

  9.   <title>Tiles powered by Flexbox | Bulma v0.5.2: a modern CSS framework based on Flexbox</title>
    10. 

  10. 

  11.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    12. 

  12.   
    13. 

  13.   
    14. 

  14.   
    15. 

  15.   <link rel="stylesheet" href="http://bulma.io/versions/0.5.2/css/bulma-docs.css?v=20170911-2007">
    16. 

  16. 

  17.   <link rel="canonical" href="http://bulma.io/versions/0.5.2/documentation/layout/tiles/">
    18. 

  18.   <link rel="alternate" type="application/rss+xml" title="Bulma v0.5.2: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.2/feed.xml">
    19. 

  19. 

  20.   <meta property="og:url" content="http://bulma.io/versions/0.5.2">
    21. 

  21.   <meta property="og:type" content="website">
    22. 

  22.   <meta property="og:title" content="Bulma v0.5.2: a modern CSS framework based on Flexbox">
    23. 

  23.   <meta property="og:image" content="http://bulma.io/versions/0.5.2/images/bulma-banner.png">
    24. 

  24.   <meta property="og:image:type" content="image/png">
    25. 

  25.   <meta property="og:image:width" content="1200">
    26. 

  26.   <meta property="og:image:height" content="630">
    27. 

  27.   <meta property="og:description" content="Bulma v0.5.2 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
    28. 

  28. 

  29.   <meta name="twitter:card" content="summary_large_image">
    30. 

  30.   <meta name="twitter:site" content="@jgthms">
    31. 

  31.   <meta name="twitter:creator" content="@jgthms">
    32. 

  32.   <meta name="twitter:title" content="Bulma v0.5.2: a modern CSS framework based on Flexbox">
    33. 

  33.   <meta name="twitter:image" content="http://bulma.io/versions/0.5.2/images/bulma-banner.png">
    34. 

  34.   <meta name="twitter:description" content="Bulma v0.5.2 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
    35. 

  35. 

  36.   <link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.2/favicons/apple-touch-icon.png?v=201701041855">
    37. 

  37.   <link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.2/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
    38. 

  38.   <link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.2/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
    39. 

  39.   <link rel="manifest" href="http://bulma.io/versions/0.5.2/favicons/manifest.json?v=201701041855">
    40. 

  40.   <link rel="mask-icon" href="http://bulma.io/versions/0.5.2/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
    41. 

  41.   <link rel="shortcut icon" href="http://bulma.io/versions/0.5.2/favicons/favicon.ico?v=201701041855">
    42. 

  42.   <meta name="msapplication-config" content="http://bulma.io/versions/0.5.2/favicons/browserconfig.xml?v=201701041855">
    43. 

  43.   <meta name="theme-color" content="#00d1b2">
    44. 

  44. </head>
    45. 

  45. 

  46.   <body class="layout-documentation page-layout">
    47. 

  47.     
    48. 

  48.   <div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
    49. 

  49.     <p>
    50. 

  50.       You are viewing the deprecated <strong>0.5.2</strong> version of the website.
    51. 

  51.       <a href="/">Click here to view the latest version</a>
    52. 

  52.     </p>
    53. 

  53.   </div>
    54. 

  54. 

  55. 

  56.     <div class="container">
    57. 

  57.   <nav class="navbar ">
    58. 

  58.   <div class="navbar-brand">
    59. 

  59.     <a class="navbar-item" href="http://bulma.io/versions/0.5.2">
    60. 

  60.       <img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: a modern CSS framework based on Flexbox" width="112" height="28">
    61. 

  61.     </a>
    62. 

  62. 

  63.     <a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
    64. 

  64.       <span class="icon" style="color: #333;">
    65. 

  65.         <i class="fa fa-lg fa-github"></i>
    66. 

  66.       </span>
    67. 

  67.     </a>
    68. 

  68. 

  69.     <a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
    70. 

  70.       <span class="icon" style="color: #55acee;">
    71. 

  71.         <i class="fa fa-lg fa-twitter"></i>
    72. 

  72.       </span>
    73. 

  73.     </a>
    74. 

  74. 

  75.     <div class="navbar-burger burger" data-target="navMenuDocumentation">
    76. 

  76.       <span></span>
    77. 

  77.       <span></span>
    78. 

  78.       <span></span>
    79. 

  79.     </div>
    80. 

  80.   </div>
    81. 

  81. 

  82.   <div id="navMenuDocumentation" class="navbar-menu">
    83. 

  83.     <div class="navbar-start">
    84. 

  84.       <div class="navbar-item has-dropdown is-hoverable">
    85. 

  85.         <a class="navbar-link  is-active" href="/versions/0.5.2/documentation/overview/start/">
    86. 

  86.           Docs
    87. 

  87.         </a>
    88. 

  88.         <div class="navbar-dropdown ">
    89. 

  89.           <a class="navbar-item " href="/versions/0.5.2/documentation/overview/start/">
    90. 

  90.             Overview
    91. 

  91.           </a>
    92. 

  92.           <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
    93. 

  93.             Modifiers
    94. 

  94.           </a>
    95. 

  95.           <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
    96. 

  96.             Columns
    97. 

  97.           </a>
    98. 

  98.           <a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
    99. 

  99.             Layout
    100. 

  100.           </a>
    101. 

  101.           <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/form/general/">
    102. 

  102.             Form
    103. 

  103.           </a>
    104. 

  104.           <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
    105. 

  105.             Elements
    106. 

  106.           </a>
    107. 

  107.           
    108. 

  108.             <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">
    109. 

  109.               Components
    110. 

  110.             </a>
    111. 

  111.           
    112. 

  112.           <hr class="navbar-divider">
    113. 

  113.           <div class="navbar-item">
    114. 

  114.             <div>
    115. 

  115.               <p class="is-size-6-desktop">
    116. 

  116.                 <strong class="has-text-info">0.5.2</strong>
    117. 

  117.               </p>
    118. 

  118.               
    119. 

  119.                 <small>
    120. 

  120.                   <a class="bd-view-all-versions" href="/versions">View all versions</a>
    121. 

  121.                 </small>
    122. 

  122.               
    123. 

  123.             </div>
    124. 

  124.           </div>
    125. 

  125.         </div>
    126. 

  126.       </div>
    127. 

  127.       <div class="navbar-item has-dropdown is-hoverable">
    128. 

  128.         <a class="navbar-link " href="http://bulma.io/versions/0.5.2/blog/">
    129. 

  129.           Blog
    130. 

  130.         </a>
    131. 

  131.         <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
    132. 

  132.           
    133. 

  133.             <a class="navbar-item" href="/2017/08/03/list-of-tags/">
    134. 

  134.               <div class="navbar-content">
    135. 

  135.                 <p>
    136. 

  136.                   <small class="has-text-info">03 Aug 2017</small>
    137. 

  137.                 </p>
    138. 

  138.                 <p>New feature: list of tags</p>
    139. 

  139.               </div>
    140. 

  140.             </a>
    141. 

  141.           
    142. 

  142.             <a class="navbar-item" href="/2017/08/01/bulma-bootstrap-comparison/">
    143. 

  143.               <div class="navbar-content">
    144. 

  144.                 <p>
    145. 

  145.                   <small class="has-text-info">01 Aug 2017</small>
    146. 

  146.                 </p>
    147. 

  147.                 <p>Bulma / Bootstrap comparison</p>
    148. 

  148.               </div>
    149. 

  149.             </a>
    150. 

  150.           
    151. 

  151.             <a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
    152. 

  152.               <div class="navbar-content">
    153. 

  153.                 <p>
    154. 

  154.                   <small class="has-text-info">24 Jul 2017</small>
    155. 

  155.                 </p>
    156. 

  156.                 <p>Access previous Bulma versions</p>
    157. 

  157.               </div>
    158. 

  158.             </a>
    159. 

  159.           
    160. 

  160.           <a class="navbar-item" href="http://bulma.io/versions/0.5.2/blog/">
    161. 

  161.             More posts
    162. 

  162.           </a>
    163. 

  163.           <hr class="navbar-divider">
    164. 

  164.           <div class="navbar-item">
    165. 

  165.             <div class="navbar-content">
    166. 

  166.               <div class="level is-mobile">
    167. 

  167.                 <div class="level-left">
    168. 

  168.                   <div class="level-item">
    169. 

  169.                     <strong>Stay up to date!</strong>
    170. 

  170.                   </div>
    171. 

  171.                 </div>
    172. 

  172.                 <div class="level-right">
    173. 

  173.                   <div class="level-item">
    174. 

  174.                     <a class="button bd-is-rss is-small" href="http://bulma.io/versions/0.5.2/atom.xml">
    175. 

  175.                       <span class="icon is-small">
    176. 

  176.                         <i class="fa fa-rss"></i>
    177. 

  177.                       </span>
    178. 

  178.                       <span>Subscribe</span>
    179. 

  179.                     </a>
    180. 

  180.                   </div>
    181. 

  181.                 </div>
    182. 

  182.               </div>
    183. 

  183.             </div>
    184. 

  184.           </div>
    185. 

  185.         </div>
    186. 

  186.       </div>
    187. 

  187.       <div class="navbar-item has-dropdown is-hoverable">
    188. 

  188.         <div class="navbar-link">
    189. 

  189.           More
    190. 

  190.         </div>
    191. 

  191.         <div id="moreDropdown" class="navbar-dropdown ">
    192. 

  192.           <a class="navbar-item " href="http://bulma.io/versions/0.5.2/extensions/">
    193. 

  193.             <div class="level is-mobile">
    194. 

  194.               <div class="level-left">
    195. 

  195.                 <div class="level-item">
    196. 

  196.                   <p>
    197. 

  197.                     <strong>Extensions</strong>
    198. 

  198.                     <br>
    199. 

  199.                     <small>Side projects to enhance Bulma</small>
    200. 

  200.                   </p>
    201. 

  201.                 </div>
    202. 

  202.               </div>
    203. 

  203.               <div class="level-right">
    204. 

  204.                 <div class="level-item">
    205. 

  205.                   <span class="icon has-text-info">
    206. 

  206.                     <i class="fa fa-plug"></i>
    207. 

  207.                   </span>
    208. 

  208.                 </div>
    209. 

  209.               </div>
    210. 

  210.             </div>
    211. 

  211.           </a>
    212. 

  212.         </div>
    213. 

  213.       </div>
    214. 

  214.       <a class="navbar-item " href="http://bulma.io/versions/0.5.2/expo/">
    215. 

  215.         <span class="bd-emoji">⭐️</span>
    216. 

  216.         Expo
    217. 

  217.       </a>
    218. 

  218.       <a class="navbar-item " href="http://bulma.io/versions/0.5.2/love/">
    219. 

  219.         <span class="bd-emoji">❤️</span>
    220. 

  220.         Love
    221. 

  221.       </a>
    222. 

  222.     </div>
    223. 

  223. 

  224.     <div class="navbar-end">
    225. 

  225.       <a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
    226. 

  226.         <span class="icon" style="color: #333;">
    227. 

  227.           <i class="fa fa-lg fa-github"></i>
    228. 

  228.         </span>
    229. 

  229.       </a>
    230. 

  230.       <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
    231. 

  231.         <span class="icon" style="color: #55acee;">
    232. 

  232.           <i class="fa fa-lg fa-twitter"></i>
    233. 

  233.         </span>
    234. 

  234.       </a>
    235. 

  235.       <div class="navbar-item">
    236. 

  236.         <div class="field is-grouped">
    237. 

  237.           <p class="control">
    238. 

  238.             <a class="bd-tw-button button"
    239. 

  239.   data-social-network="Twitter"
    240. 

  240.   data-social-action="tweet"
    241. 

  241.   data-social-target="http://bulma.io/versions/0.5.2"
    242. 

  242.   target="_blank"
    243. 

  243.   href="https://twitter.com/intent/tweet?text=Bulma v0.5.2: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io/versions/0.5.2&via=jgthms">
    244. 

  244.   <span class="icon">
    245. 

  245.     <i class="fa fa-twitter"></i>
    246. 

  246.   </span>
    247. 

  247.   <span>
    248. 

  248.     Tweet
    249. 

  249.   </span>
    250. 

  250. </a>
    251. 

  251. 

  252.           </p>
    253. 

  253.           <p class="control">
    254. 

  254.             <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.2.zip">
    255. 

  255.               <span class="icon">
    256. 

  256.                 <i class="fa fa-download"></i>
    257. 

  257.               </span>
    258. 

  258.               <span>Download</span>
    259. 

  259.             </a>
    260. 

  260.           </p>
    261. 

  261.         </div>
    262. 

  262.       </div>
    263. 

  263.     </div>
    264. 

  264.   </div>
    265. 

  265. </nav>
    266. 

  266. 

  267. </div>
    268. 

  268. 

  269. <section class="hero is-primary">
    270. 

  270.   <div class="hero-body">
    271. 

  271.     <div class="container">
    272. 

  272.       <div class="columns is-vcentered">
    273. 

  273.         <div class="column">
    274. 

  274.           <p class="title">
    275. 

  275.             Documentation
    276. 

  276.           </p>
    277. 

  277.           <p class="subtitle">
    278. 

  278.             Everything you need to <strong>create a website</strong> with Bulma
    279. 

  279.           </p>
    280. 

  280.         </div>
    281. 

  281.         <div class="column is-narrow">
    282. 

  282.           <div id="carboncontainer">
    283. 

  283. <div id="carbon" class="box">
    284. 

  284.   <script>
    285. 

  285.     var _0xa6d2 = [
    286. 

  286.       '\x73\x63\x72\x69\x70\x74',
    287. 

  287.       '\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
    288. 

  288.       '\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
    289. 

  289.       '\x73\x70\x6c\x69\x74',
    290. 

  290.       '\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
    291. 

  291.     ];
    292. 

  292.     (function (_0x2fd559, _0x28dd75) {
    293. 

  293.       var _0x78c626 = function (_0x497400) {
    294. 

  294.         while (--_0x497400) {
    295. 

  295.           _0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
    296. 

  296.         }
    297. 

  297.       };
    298. 

  298.       _0x78c626(++_0x28dd75);
    299. 

  299.     }(_0xa6d2, 0x125));
    300. 

  300.     var _0x2a6d = function (_0x8ed41, _0x381cfd) {
    301. 

  301.       _0x8ed41 = _0x8ed41 - 0x0;
    302. 

  302.       var _0x546dea = _0xa6d2[_0x8ed41];
    303. 

  303.       return _0x546dea;
    304. 

  304.     };
    305. 

  305.     function __fb(_0x5ea579) {
    306. 

  306.       var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
    307. 

  307.       while (!![]) {
    308. 

  308.         switch (_0x3142de[_0x58dc19++]) {
    309. 

  309.         case '\x30':
    310. 

  310.           var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
    311. 

  311.           continue;
    312. 

  312.         case '\x31':
    313. 

  313.           _0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
    314. 

  314.           continue;
    315. 

  315.         case '\x32':
    316. 

  316.           _0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
    317. 

  317.           continue;
    318. 

  318.         case '\x33':
    319. 

  319.           _0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
    320. 

  320.           continue;
    321. 

  321.         case '\x34':
    322. 

  322.           _0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
    323. 

  323.           continue;
    324. 

  324.         case '\x35':
    325. 

  325.           _0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
    326. 

  326.           continue;
    327. 

  327.         }
    328. 

  328.         break;
    329. 

  329.       }
    330. 

  330.     }
    331. 

  331.   </script>
    332. 

  332.   
    333. 

  333.   <script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
    334. 

  334.   
    335. 

  335. </div>
    336. 

  336. </div>
    337. 

  337. 

  338.         </div>
    339. 

  339.       </div>
    340. 

  340.     </div>
    341. 

  341.   </div>
    342. 

  342. 

  343.   <div class="hero-foot">
    344. 

  344.     <div class="container">
    345. 

  345.       <nav class="tabs is-boxed">
    346. 

  346.         <ul>
    347. 

  347.           <li >
    348. 

  348.             <a href="/versions/0.5.2/documentation/overview/start/">Overview</a>
    349. 

  349.           </li>
    350. 

  350.           <li >
    351. 

  351.             <a href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax">Modifiers</a>
    352. 

  352.           </li>
    353. 

  353.           <li >
    354. 

  354.             <a href="http://bulma.io/versions/0.5.2/documentation/columns/basics">Columns</a>
    355. 

  355.           </li>
    356. 

  356.           <li class="is-active">
    357. 

  357.             <a href="http://bulma.io/versions/0.5.2/documentation/layout/container/">Layout</a>
    358. 

  358.           </li>
    359. 

  359.           <li >
    360. 

  360.             <a href="http://bulma.io/versions/0.5.2/documentation/form/general">Form</a>
    361. 

  361.           </li>
    362. 

  362.           <li >
    363. 

  363.             <a href="http://bulma.io/versions/0.5.2/documentation/elements/box/">Elements</a>
    364. 

  364.           </li>
    365. 

  365.           <li >
    366. 

  366.             
    367. 

  367.               <a href="http://bulma.io/versions/0.5.2/documentation/components/breadcrumb/">Components</a>
    368. 

  368.             
    369. 

  369.           </li>
    370. 

  370.         </ul>
    371. 

  371.       </div>
    372. 

  372.     </div>
    373. 

  373.   </nav>
    374. 

  374. </section>
    375. 

  375. 

  376. <nav class="navbar has-shadow">
    377. 

  377.   <div class="container">
    378. 

  378.     <div class="navbar-tabs">
    379. 

  379.       <a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
    380. 

  380.         Container
    381. 

  381.       </a>
    382. 

  382.       <a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/layout/level/">
    383. 

  383.         Level
    384. 

  384.       </a>
    385. 

  385.       <a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/layout/media-object/">
    386. 

  386.         Media Object
    387. 

  387.       </a>
    388. 

  388.       <a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/layout/hero/">
    389. 

  389.         Hero
    390. 

  390.       </a>
    391. 

  391.       <a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/layout/section/">
    392. 

  392.         Section
    393. 

  393.       </a>
    394. 

  394.       <a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.2/documentation/layout/footer/">
    395. 

  395.         Footer
    396. 

  396.       </a>
    397. 

  397.       <a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.2/documentation/layout/tiles/">
    398. 

  398.         Tiles
    399. 

  399.       </a>
    400. 

  400.     </div>
    401. 

  401.   </div>
    402. 

  402. </nav>
    403. 

  403. 

  404. 

  405. <section class="section">
    406. 

  406.   <div class="container">
    407. 

  407.     <h1 class="title">Tiles</h1>
    408. 

  408.     <h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
    409. 

  409. 

  410.     <hr>
    411. 

  411. 

  412.     <div class="content">
    413. 

  413.       <p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
    414. 

  414.     </div>
    415. 

  415. 

  416. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    417. 

  417.   <span class="c">&lt;!-- The magical tile element! --&gt;</span>
    418. 

  418. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    419. 

  419. 

  420.     <hr style="margin-bottom: 0;">
    421. 

  421. 

  422. <h3 id="example" class="title is-4 is-spaced bd-anchor-title">
    423. 

  423.   Example
    424. 

  424.   <a class="bd-anchor-link" href="#example">
    425. 

  425.     #
    426. 

  426.   </a>
    427. 

  427. </h3>
    428. 

  428. 

  429. 

  430.     <div class="tile is-ancestor">
    431. 

  431.       <div class="tile is-vertical is-8">
    432. 

  432.         <div class="tile">
    433. 

  433.           <div class="tile is-parent is-vertical">
    434. 

  434.             <article class="tile is-child notification is-primary">
    435. 

  435.               <p class="title">Vertical...</p>
    436. 

  436.               <p class="subtitle">Top tile</p>
    437. 

  437.             </article>
    438. 

  438.             <article class="tile is-child notification is-warning">
    439. 

  439.               <p class="title">...tiles</p>
    440. 

  440.               <p class="subtitle">Bottom tile</p>
    441. 

  441.             </article>
    442. 

  442.           </div>
    443. 

  443.           <div class="tile is-parent">
    444. 

  444.             <article class="tile is-child notification is-info">
    445. 

  445.               <p class="title">Middle tile</p>
    446. 

  446.               <p class="subtitle">With an image</p>
    447. 

  447.               <figure class="image is-4by3">
    448. 

  448.                 <img src="http://bulma.io/versions/0.5.2/images/placeholders/640x480.png">
    449. 

  449.               </figure>
    450. 

  450.             </article>
    451. 

  451.           </div>
    452. 

  452.         </div>
    453. 

  453.         <div class="tile is-parent">
    454. 

  454.           <article class="tile is-child notification is-danger">
    455. 

  455.             <p class="title">Wide tile</p>
    456. 

  456.             <p class="subtitle">Aligned with the right tile</p>
    457. 

  457.             <div class="content">
    458. 

  458.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    459. 

  459.             </div>
    460. 

  460.           </article>
    461. 

  461.         </div>
    462. 

  462.       </div>
    463. 

  463.       <div class="tile is-parent">
    464. 

  464.         <article class="tile is-child notification is-success">
    465. 

  465.           <div class="content">
    466. 

  466.             <p class="title">Tall tile</p>
    467. 

  467.             <p class="subtitle">With even more content</p>
    468. 

  468.             <div class="content">
    469. 

  469.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
    470. 

  470.               <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
    471. 

  471.               <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
    472. 

  472.             </div>
    473. 

  473.           </div>
    474. 

  474.         </article>
    475. 

  475.       </div>
    476. 

  476.     </div>
    477. 

  477. 

  478. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    479. 

  479.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-vertical is-8"</span><span class="nt">&gt;</span>
    480. 

  480.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    481. 

  481.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent is-vertical"</span><span class="nt">&gt;</span>
    482. 

  482.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child notification is-primary"</span><span class="nt">&gt;</span>
    483. 

  483.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Vertical...<span class="nt">&lt;/p&gt;</span>
    484. 

  484.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Top tile<span class="nt">&lt;/p&gt;</span>
    485. 

  485.         <span class="nt">&lt;/article&gt;</span>
    486. 

  486.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child notification is-warning"</span><span class="nt">&gt;</span>
    487. 

  487.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>...tiles<span class="nt">&lt;/p&gt;</span>
    488. 

  488.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Bottom tile<span class="nt">&lt;/p&gt;</span>
    489. 

  489.         <span class="nt">&lt;/article&gt;</span>
    490. 

  490.       <span class="nt">&lt;/div&gt;</span>
    491. 

  491.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    492. 

  492.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child notification is-info"</span><span class="nt">&gt;</span>
    493. 

  493.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Middle tile<span class="nt">&lt;/p&gt;</span>
    494. 

  494.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With an image<span class="nt">&lt;/p&gt;</span>
    495. 

  495.           <span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"image is-4by3"</span><span class="nt">&gt;</span>
    496. 

  496.             <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/placeholders/640x480.png"</span><span class="nt">&gt;</span>
    497. 

  497.           <span class="nt">&lt;/figure&gt;</span>
    498. 

  498.         <span class="nt">&lt;/article&gt;</span>
    499. 

  499.       <span class="nt">&lt;/div&gt;</span>
    500. 

  500.     <span class="nt">&lt;/div&gt;</span>
    501. 

  501.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    502. 

  502.       <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child notification is-danger"</span><span class="nt">&gt;</span>
    503. 

  503.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Wide tile<span class="nt">&lt;/p&gt;</span>
    504. 

  504.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Aligned with the right tile<span class="nt">&lt;/p&gt;</span>
    505. 

  505.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    506. 

  506.           <span class="c">&lt;!-- Content --&gt;</span>
    507. 

  507.         <span class="nt">&lt;/div&gt;</span>
    508. 

  508.       <span class="nt">&lt;/article&gt;</span>
    509. 

  509.     <span class="nt">&lt;/div&gt;</span>
    510. 

  510.   <span class="nt">&lt;/div&gt;</span>
    511. 

  511.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    512. 

  512.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child notification is-success"</span><span class="nt">&gt;</span>
    513. 

  513.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    514. 

  514.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Tall tile<span class="nt">&lt;/p&gt;</span>
    515. 

  515.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With even more content<span class="nt">&lt;/p&gt;</span>
    516. 

  516.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    517. 

  517.           <span class="c">&lt;!-- Content --&gt;</span>
    518. 

  518.         <span class="nt">&lt;/div&gt;</span>
    519. 

  519.       <span class="nt">&lt;/div&gt;</span>
    520. 

  520.     <span class="nt">&lt;/article&gt;</span>
    521. 

  521.   <span class="nt">&lt;/div&gt;</span>
    522. 

  522. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    523. 

  523. 

  524.     <hr style="margin-bottom: 0;">
    525. 

  525. 

  526. <h3 id="modifiers" class="title is-4 is-spaced bd-anchor-title">
    527. 

  527.   Modifiers
    528. 

  528.   <a class="bd-anchor-link" href="#modifiers">
    529. 

  529.     #
    530. 

  530.   </a>
    531. 

  531. </h3>
    532. 

  532. 

  533. 

  534. 

  535.     <div class="content">
    536. 

  536.       <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
    537. 

  537.       <ul>
    538. 

  538.         <li>
    539. 

  539.           <strong>3 contextual</strong> modifiers
    540. 

  540.           <ul>
    541. 

  541.             <li><code>is-ancestor</code></li>
    542. 

  542.             <li><code>is-parent</code></li>
    543. 

  543.             <li><code>is-child</code></li>
    544. 

  544.           </ul>
    545. 

  545.         </li>
    546. 

  546.         <li>
    547. 

  547.           <strong>1 directional</strong> modifier
    548. 

  548.           <ul>
    549. 

  549.             <li><code>is-vertical</code></li>
    550. 

  550.           </ul>
    551. 

  551.         </li>
    552. 

  552.         <li>
    553. 

  553.           <strong>12 horizontal size</strong> modifiers
    554. 

  554.           <ul>
    555. 

  555.             <li>from <code>is-1</code></li>
    556. 

  556.             <li>to <code>is-12</code></li>
    557. 

  557.           </ul>
    558. 

  558.         </li>
    559. 

  559.       </ul>
    560. 

  560.     </div>
    561. 

  561. 

  562.     <hr style="margin-bottom: 0;">
    563. 

  563. 

  564. <h3 id="how-it-works-nesting" class="title is-4 is-spaced bd-anchor-title">
    565. 

  565.   How it works: Nesting
    566. 

  566.   <a class="bd-anchor-link" href="#how-it-works-nesting">
    567. 

  567.     #
    568. 

  568.   </a>
    569. 

  569. </h3>
    570. 

  570. 

  571. 

  572.     <div class="content">
    573. 

  573.       <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
    574. 

  574.     </div>
    575. 

  575. 

  576.     <div class="columns">
    577. 

  577.       <div class="column is-one-third">
    578. 

  578.         <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
    579. 

  579.       </div>
    580. 

  580.       <div class="column is-two-thirds">
    581. 

  581. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    582. 

  582.   <span class="c">&lt;!-- All other tile elemnts --&gt;</span>
    583. 

  583. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    584. 

  584.       </div>
    585. 

  585.     </div>
    586. 

  586. 

  587.     <div class="columns">
    588. 

  588.       <div class="column is-one-third">
    589. 

  589.         <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
    590. 

  590.       </div>
    591. 

  591.       <div class="column is-two-thirds">
    592. 

  592. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    593. 

  593.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    594. 

  594.     <span class="c">&lt;!-- Add content or other tiles --&gt;</span>
    595. 

  595.   <span class="nt">&lt;/div&gt;</span>
    596. 

  596.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    597. 

  597.     <span class="c">&lt;!-- Add content or other tiles --&gt;</span>
    598. 

  598.   <span class="nt">&lt;/div&gt;</span>
    599. 

  599. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    600. 

  600.       </div>
    601. 

  601.     </div>
    602. 

  602. 

  603.     <div class="columns">
    604. 

  604.       <div class="column is-one-third">
    605. 

  605.         <p>
    606. 

  606.           You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
    607. 

  607.           <br>
    608. 

  608.           For example, <code>is-4</code> will take up 1/3 of the horizontal space:
    609. 

  609.         </p>
    610. 

  610.       </div>
    611. 

  611.       <div class="column is-two-thirds">
    612. 

  612. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    613. 

  613.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-4"</span><span class="nt">&gt;</span>
    614. 

  614.     <span class="c">&lt;!-- 1/3 --&gt;</span>
    615. 

  615.   <span class="nt">&lt;/div&gt;</span>
    616. 

  616.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    617. 

  617.     <span class="c">&lt;!-- This tile will take the rest: 2/3 --&gt;</span>
    618. 

  618.   <span class="nt">&lt;/div&gt;</span>
    619. 

  619. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    620. 

  620.       </div>
    621. 

  621.     </div>
    622. 

  622. 

  623.     <div class="columns">
    624. 

  624.       <div class="column is-one-third">
    625. 

  625.         <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
    626. 

  626.       </div>
    627. 

  627.       <div class="column is-two-thirds">
    628. 

  628. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    629. 

  629.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-4 is-vertical"</span><span class="nt">&gt;</span>
    630. 

  630.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    631. 

  631.       <span class="c">&lt;!-- Top tile --&gt;</span>
    632. 

  632.     <span class="nt">&lt;/div&gt;</span>
    633. 

  633.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    634. 

  634.       <span class="c">&lt;!-- Bottom tile --&gt;</span>
    635. 

  635.     <span class="nt">&lt;/div&gt;</span>
    636. 

  636.   <span class="nt">&lt;/div&gt;</span>
    637. 

  637.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    638. 

  638.     <span class="c">&lt;!-- This tile will take up the whole vertical space --&gt;</span>
    639. 

  639.   <span class="nt">&lt;/div&gt;</span>
    640. 

  640. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    641. 

  641.       </div>
    642. 

  642.     </div>
    643. 

  643. 

  644.     <div class="columns">
    645. 

  645.       <div class="column is-one-third">
    646. 

  646.         <div class="content">
    647. 

  647.           <p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
    648. 

  648.           <ul>
    649. 

  649.             <li>add <em>any</em> class you want, like <code>box</code></li>
    650. 

  650.             <li>add the <code>is-child</code> modifier on the tile</li>
    651. 

  651.             <li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
    652. 

  652.           </ul>
    653. 

  653.         </div>
    654. 

  654.       </div>
    655. 

  655.       <div class="column is-two-thirds">
    656. 

  656. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    657. 

  657.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-4 is-vertical is-parent"</span><span class="nt">&gt;</span>
    658. 

  658.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    659. 

  659.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/p&gt;</span>
    660. 

  660.     <span class="nt">&lt;/div&gt;</span>
    661. 

  661.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    662. 

  662.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/p&gt;</span>
    663. 

  663.     <span class="nt">&lt;/div&gt;</span>
    664. 

  664.   <span class="nt">&lt;/div&gt;</span>
    665. 

  665.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    666. 

  666.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    667. 

  667.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/p&gt;</span>
    668. 

  668.     <span class="nt">&lt;/div&gt;</span>
    669. 

  669.   <span class="nt">&lt;/div&gt;</span>
    670. 

  670. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    671. 

  671.       </div>
    672. 

  672.     </div>
    673. 

  673. 

  674.     <div class="tile is-ancestor">
    675. 

  675.       <div class="tile is-4 is-vertical is-parent">
    676. 

  676.         <div class="tile is-child box">
    677. 

  677.           <p class="title">One</p>
    678. 

  678.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    679. 

  679.         </div>
    680. 

  680.         <div class="tile is-child box">
    681. 

  681.           <p class="title">Two</p>
    682. 

  682.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    683. 

  683.         </div>
    684. 

  684.       </div>
    685. 

  685.       <div class="tile is-parent">
    686. 

  686.         <div class="tile is-child box">
    687. 

  687.           <p class="title">Three</p>
    688. 

  688.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
    689. 

  689.           <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
    690. 

  690.           <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
    691. 

  691.         </div>
    692. 

  692.       </div>
    693. 

  693.     </div>
    694. 

  694. 

  695. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    696. 

  696.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-4 is-vertical is-parent"</span><span class="nt">&gt;</span>
    697. 

  697.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    698. 

  698.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/p&gt;</span>
    699. 

  699.       <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    700. 

  700.     <span class="nt">&lt;/div&gt;</span>
    701. 

  701.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    702. 

  702.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/p&gt;</span>
    703. 

  703.       <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    704. 

  704.     <span class="nt">&lt;/div&gt;</span>
    705. 

  705.   <span class="nt">&lt;/div&gt;</span>
    706. 

  706.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    707. 

  707.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    708. 

  708.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/p&gt;</span>
    709. 

  709.       <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.<span class="nt">&lt;/p&gt;</span>
    710. 

  710.       <span class="nt">&lt;p&gt;</span>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.<span class="nt">&lt;/p&gt;</span>
    711. 

  711.       <span class="nt">&lt;p&gt;</span>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.<span class="nt">&lt;/p&gt;</span>
    712. 

  712.     <span class="nt">&lt;/div&gt;</span>
    713. 

  713.   <span class="nt">&lt;/div&gt;</span>
    714. 

  714. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    715. 

  715. 

  716.     <hr style="margin-bottom: 0;">
    717. 

  717. 

  718. <h3 id="nesting-requirements" class="title is-4 is-spaced bd-anchor-title">
    719. 

  719.   Nesting requirements
    720. 

  720.   <a class="bd-anchor-link" href="#nesting-requirements">
    721. 

  721.     #
    722. 

  722.   </a>
    723. 

  723. </h3>
    724. 

  724. 

  725. 

  726. 

  727.     <article class="message is-danger">
    728. 

  728.       <div class="message-header">
    729. 

  729.         3 levels deep at least...
    730. 

  730.       </div>
    731. 

  731.       <div class="message-body">
    732. 

  732.         <div class="content">
    733. 

  733.           <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
    734. 

  734. <figure class="highlight"><pre><code class="language-markdown" data-lang="markdown">tile is-ancestor
    735. 

  735. |
    736. 

  736. └───tile is-parent
    737. 

  737.     |
    738. 

  738.     └───tile is-child</code></pre></figure>
    739. 

  739.         </div>
    740. 

  740.       </div>
    741. 

  741.     </article>
    742. 

  742. 

  743.     <article class="message is-success">
    744. 

  744.       <div class="message-header">
    745. 

  745.         ...but more levels if you want!
    746. 

  746.       </div>
    747. 

  747.       <div class="message-body">
    748. 

  748.         <div class="content">
    749. 

  749.           <p>You can, however, nest tiles deeper than that, and mix it up!</p>
    750. 

  750. <figure class="highlight"><pre><code class="language-markdown" data-lang="markdown">tile is-ancestor
    751. 

  751. |
    752. 

  752. ├───tile is-vertical is-8
    753. 

  753. |   |
    754. 

  754. |   ├───tile
    755. 

  755. |   |   |
    756. 

  756. |   |   ├───tile is-parent is-vertical
    757. 

  757. |   |   |   ├───tile is-child
    758. 

  758. |   |   |   └───tile is-child
    759. 

  759. |   |   |
    760. 

  760. |   |   └───tile is-parent
    761. 

  761. |   |       └───tile is-child
    762. 

  762. |   |
    763. 

  763. |   └───tile is-parent
    764. 

  764. |       └───tile is-child
    765. 

  765. |
    766. 

  766. └───tile is-parent
    767. 

  767.     └───tile is-child</code></pre></figure>
    768. 

  768.         </div>
    769. 

  769.       </div>
    770. 

  770.     </article>
    771. 

  771. 

  772.     <div class="tile is-ancestor">
    773. 

  773.       <div class="tile is-vertical is-8">
    774. 

  774.         <div class="tile">
    775. 

  775.           <div class="tile is-parent is-vertical">
    776. 

  776.             <article class="tile is-child box">
    777. 

  777.               <p class="title">Vertical tiles</p>
    778. 

  778.               <p class="subtitle">Top box</p>
    779. 

  779.             </article>
    780. 

  780.             <article class="tile is-child box">
    781. 

  781.               <p class="title">Vertical tiles</p>
    782. 

  782.               <p class="subtitle">Bottom box</p>
    783. 

  783.             </article>
    784. 

  784.           </div>
    785. 

  785.           <div class="tile is-parent">
    786. 

  786.             <article class="tile is-child box">
    787. 

  787.               <p class="title">Middle box</p>
    788. 

  788.               <p class="subtitle">With an image</p>
    789. 

  789.               <figure class="image is-4by3">
    790. 

  790.                 <img src="http://bulma.io/versions/0.5.2/images/placeholders/640x480.png">
    791. 

  791.               </figure>
    792. 

  792.             </article>
    793. 

  793.           </div>
    794. 

  794.         </div>
    795. 

  795.         <div class="tile is-parent">
    796. 

  796.           <article class="tile is-child box">
    797. 

  797.             <p class="title">Wide column</p>
    798. 

  798.             <p class="subtitle">Aligned with the right column</p>
    799. 

  799.             <div class="content">
    800. 

  800.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    801. 

  801.             </div>
    802. 

  802.           </article>
    803. 

  803.         </div>
    804. 

  804.       </div>
    805. 

  805.       <div class="tile is-parent">
    806. 

  806.         <article class="tile is-child box">
    807. 

  807.           <div class="content">
    808. 

  808.             <p class="title">Tall column</p>
    809. 

  809.             <p class="subtitle">With even more content</p>
    810. 

  810.             <div class="content">
    811. 

  811.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
    812. 

  812.               <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
    813. 

  813.               <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
    814. 

  814.             </div>
    815. 

  815.           </div>
    816. 

  816.         </article>
    817. 

  817.       </div>
    818. 

  818.     </div>
    819. 

  819. 

  820. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    821. 

  821.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-vertical is-8"</span><span class="nt">&gt;</span>
    822. 

  822.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    823. 

  823.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent is-vertical"</span><span class="nt">&gt;</span>
    824. 

  824.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    825. 

  825.           <span class="c">&lt;!-- Put any content you want --&gt;</span>
    826. 

  826.         <span class="nt">&lt;/article&gt;</span>
    827. 

  827.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    828. 

  828.           <span class="c">&lt;!-- Put any content you want --&gt;</span>
    829. 

  829.         <span class="nt">&lt;/article&gt;</span>
    830. 

  830.       <span class="nt">&lt;/div&gt;</span>
    831. 

  831.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    832. 

  832.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    833. 

  833.           <span class="c">&lt;!-- Put any content you want --&gt;</span>
    834. 

  834.         <span class="nt">&lt;/article&gt;</span>
    835. 

  835.       <span class="nt">&lt;/div&gt;</span>
    836. 

  836.     <span class="nt">&lt;/div&gt;</span>
    837. 

  837.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    838. 

  838.       <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    839. 

  839.         <span class="c">&lt;!-- Put any content you want --&gt;</span>
    840. 

  840.       <span class="nt">&lt;/article&gt;</span>
    841. 

  841.     <span class="nt">&lt;/div&gt;</span>
    842. 

  842.   <span class="nt">&lt;/div&gt;</span>
    843. 

  843.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    844. 

  844.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    845. 

  845.       <span class="c">&lt;!-- Put any content you want --&gt;</span>
    846. 

  846.     <span class="nt">&lt;/article&gt;</span>
    847. 

  847.   <span class="nt">&lt;/div&gt;</span>
    848. 

  848. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    849. 

  849. 

  850.     <hr style="margin-bottom: 0;">
    851. 

  851. 

  852. <h3 id="3-columns" class="title is-4 is-spaced bd-anchor-title">
    853. 

  853.   3 columns
    854. 

  854.   <a class="bd-anchor-link" href="#3-columns">
    855. 

  855.     #
    856. 

  856.   </a>
    857. 

  857. </h3>
    858. 

  858. 

  859. 

  860. 

  861.     <div class="tile is-ancestor">
    862. 

  862.       <div class="tile is-parent">
    863. 

  863.         <article class="tile is-child box">
    864. 

  864.           <p class="title">Hello World</p>
    865. 

  865.           <p class="subtitle">What is up?</p>
    866. 

  866.         </article>
    867. 

  867.       </div>
    868. 

  868.       <div class="tile is-parent">
    869. 

  869.         <article class="tile is-child box">
    870. 

  870.           <p class="title">Foo</p>
    871. 

  871.           <p class="subtitle">Bar</p>
    872. 

  872.         </article>
    873. 

  873.       </div>
    874. 

  874.       <div class="tile is-parent">
    875. 

  875.         <article class="tile is-child box">
    876. 

  876.           <p class="title">Third column</p>
    877. 

  877.           <p class="subtitle">With some content</p>
    878. 

  878.           <div class="content">
    879. 

  879.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    880. 

  880.           </div>
    881. 

  881.         </article>
    882. 

  882.       </div>
    883. 

  883.     </div>
    884. 

  884.     <div class="tile is-ancestor">
    885. 

  885.       <div class="tile is-vertical is-8">
    886. 

  886.         <div class="tile">
    887. 

  887.           <div class="tile is-parent is-vertical">
    888. 

  888.             <article class="tile is-child box">
    889. 

  889.               <p class="title">Vertical tiles</p>
    890. 

  890.               <p class="subtitle">Top box</p>
    891. 

  891.             </article>
    892. 

  892.             <article class="tile is-child box">
    893. 

  893.               <p class="title">Vertical tiles</p>
    894. 

  894.               <p class="subtitle">Bottom box</p>
    895. 

  895.             </article>
    896. 

  896.           </div>
    897. 

  897.           <div class="tile is-parent">
    898. 

  898.             <article class="tile is-child box">
    899. 

  899.               <p class="title">Middle box</p>
    900. 

  900.               <p class="subtitle">With an image</p>
    901. 

  901.               <figure class="image is-4by3">
    902. 

  902.                 <img src="http://bulma.io/versions/0.5.2/images/placeholders/640x480.png">
    903. 

  903.               </figure>
    904. 

  904.             </article>
    905. 

  905.           </div>
    906. 

  906.         </div>
    907. 

  907.         <div class="tile is-parent">
    908. 

  908.           <article class="tile is-child box">
    909. 

  909.             <p class="title">Wide column</p>
    910. 

  910.             <p class="subtitle">Aligned with the right column</p>
    911. 

  911.             <div class="content">
    912. 

  912.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    913. 

  913.             </div>
    914. 

  914.           </article>
    915. 

  915.         </div>
    916. 

  916.       </div>
    917. 

  917.       <div class="tile is-parent">
    918. 

  918.         <article class="tile is-child box">
    919. 

  919.           <div class="content">
    920. 

  920.             <p class="title">Tall column</p>
    921. 

  921.             <p class="subtitle">With even more content</p>
    922. 

  922.             <div class="content">
    923. 

  923.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
    924. 

  924.               <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
    925. 

  925.               <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
    926. 

  926.             </div>
    927. 

  927.           </div>
    928. 

  928.         </article>
    929. 

  929.       </div>
    930. 

  930.     </div>
    931. 

  931.     <div class="tile is-ancestor">
    932. 

  932.       <div class="tile is-parent">
    933. 

  933.         <article class="tile is-child box">
    934. 

  934.           <p class="title">Side column</p>
    935. 

  935.           <p class="subtitle">With some content</p>
    936. 

  936.           <div class="content">
    937. 

  937.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    938. 

  938.           </div>
    939. 

  939.         </article>
    940. 

  940.       </div>
    941. 

  941.       <div class="tile is-parent is-8">
    942. 

  942.         <article class="tile is-child box">
    943. 

  943.           <p class="title">Main column</p>
    944. 

  944.           <p class="subtitle">With some content</p>
    945. 

  945.           <div class="content">
    946. 

  946.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    947. 

  947.           </div>
    948. 

  948.         </article>
    949. 

  949.       </div>
    950. 

  950.     </div>
    951. 

  951. 

  952. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    953. 

  953.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    954. 

  954.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    955. 

  955.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Hello World<span class="nt">&lt;/p&gt;</span>
    956. 

  956.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>What is up?<span class="nt">&lt;/p&gt;</span>
    957. 

  957.     <span class="nt">&lt;/article&gt;</span>
    958. 

  958.   <span class="nt">&lt;/div&gt;</span>
    959. 

  959.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    960. 

  960.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    961. 

  961.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Foo<span class="nt">&lt;/p&gt;</span>
    962. 

  962.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Bar<span class="nt">&lt;/p&gt;</span>
    963. 

  963.     <span class="nt">&lt;/article&gt;</span>
    964. 

  964.   <span class="nt">&lt;/div&gt;</span>
    965. 

  965.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    966. 

  966.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    967. 

  967.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Third column<span class="nt">&lt;/p&gt;</span>
    968. 

  968.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With some content<span class="nt">&lt;/p&gt;</span>
    969. 

  969.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    970. 

  970.         <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    971. 

  971.       <span class="nt">&lt;/div&gt;</span>
    972. 

  972.     <span class="nt">&lt;/article&gt;</span>
    973. 

  973.   <span class="nt">&lt;/div&gt;</span>
    974. 

  974. <span class="nt">&lt;/div&gt;</span>
    975. 

  975. 

  976. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    977. 

  977.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-vertical is-8"</span><span class="nt">&gt;</span>
    978. 

  978.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    979. 

  979.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent is-vertical"</span><span class="nt">&gt;</span>
    980. 

  980.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    981. 

  981.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Vertical tiles<span class="nt">&lt;/p&gt;</span>
    982. 

  982.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Top box<span class="nt">&lt;/p&gt;</span>
    983. 

  983.         <span class="nt">&lt;/article&gt;</span>
    984. 

  984.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    985. 

  985.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Vertical tiles<span class="nt">&lt;/p&gt;</span>
    986. 

  986.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Bottom box<span class="nt">&lt;/p&gt;</span>
    987. 

  987.         <span class="nt">&lt;/article&gt;</span>
    988. 

  988.       <span class="nt">&lt;/div&gt;</span>
    989. 

  989.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    990. 

  990.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    991. 

  991.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Middle box<span class="nt">&lt;/p&gt;</span>
    992. 

  992.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With an image<span class="nt">&lt;/p&gt;</span>
    993. 

  993.           <span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"image is-4by3"</span><span class="nt">&gt;</span>
    994. 

  994.             <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.2/images/placeholders/640x480.png"</span><span class="nt">&gt;</span>
    995. 

  995.           <span class="nt">&lt;/figure&gt;</span>
    996. 

  996.         <span class="nt">&lt;/article&gt;</span>
    997. 

  997.       <span class="nt">&lt;/div&gt;</span>
    998. 

  998.     <span class="nt">&lt;/div&gt;</span>
    999. 

  999.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1000. 

  1000.       <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1001. 

  1001.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Wide column<span class="nt">&lt;/p&gt;</span>
    1002. 

  1002.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Aligned with the right column<span class="nt">&lt;/p&gt;</span>
    1003. 

  1003.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1004. 

  1004.           <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    1005. 

  1005.         <span class="nt">&lt;/div&gt;</span>
    1006. 

  1006.       <span class="nt">&lt;/article&gt;</span>
    1007. 

  1007.     <span class="nt">&lt;/div&gt;</span>
    1008. 

  1008.   <span class="nt">&lt;/div&gt;</span>
    1009. 

  1009.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1010. 

  1010.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1011. 

  1011.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1012. 

  1012.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Tall column<span class="nt">&lt;/p&gt;</span>
    1013. 

  1013.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With even more content<span class="nt">&lt;/p&gt;</span>
    1014. 

  1014.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1015. 

  1015.           <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.<span class="nt">&lt;/p&gt;</span>
    1016. 

  1016.           <span class="nt">&lt;p&gt;</span>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.<span class="nt">&lt;/p&gt;</span>
    1017. 

  1017.           <span class="nt">&lt;p&gt;</span>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.<span class="nt">&lt;/p&gt;</span>
    1018. 

  1018.         <span class="nt">&lt;/div&gt;</span>
    1019. 

  1019.       <span class="nt">&lt;/div&gt;</span>
    1020. 

  1020.     <span class="nt">&lt;/article&gt;</span>
    1021. 

  1021.   <span class="nt">&lt;/div&gt;</span>
    1022. 

  1022. <span class="nt">&lt;/div&gt;</span>
    1023. 

  1023. 

  1024. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    1025. 

  1025.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1026. 

  1026.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1027. 

  1027.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Side column<span class="nt">&lt;/p&gt;</span>
    1028. 

  1028.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With some content<span class="nt">&lt;/p&gt;</span>
    1029. 

  1029.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1030. 

  1030.         <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    1031. 

  1031.       <span class="nt">&lt;/div&gt;</span>
    1032. 

  1032.     <span class="nt">&lt;/article&gt;</span>
    1033. 

  1033.   <span class="nt">&lt;/div&gt;</span>
    1034. 

  1034.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent is-8"</span><span class="nt">&gt;</span>
    1035. 

  1035.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1036. 

  1036.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Main column<span class="nt">&lt;/p&gt;</span>
    1037. 

  1037.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>With some content<span class="nt">&lt;/p&gt;</span>
    1038. 

  1038.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1039. 

  1039.         <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    1040. 

  1040.       <span class="nt">&lt;/div&gt;</span>
    1041. 

  1041.     <span class="nt">&lt;/article&gt;</span>
    1042. 

  1042.   <span class="nt">&lt;/div&gt;</span>
    1043. 

  1043. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    1044. 

  1044. 

  1045.     <hr style="margin-bottom: 0;">
    1046. 

  1046. 

  1047. <h3 id="4-columns" class="title is-4 is-spaced bd-anchor-title">
    1048. 

  1048.   4 columns
    1049. 

  1049.   <a class="bd-anchor-link" href="#4-columns">
    1050. 

  1050.     #
    1051. 

  1051.   </a>
    1052. 

  1052. </h3>
    1053. 

  1053. 

  1054. 

  1055. 

  1056.     <div class="tile is-ancestor">
    1057. 

  1057.       <div class="tile is-parent">
    1058. 

  1058.         <article class="tile is-child box">
    1059. 

  1059.           <p class="title">One</p>
    1060. 

  1060.           <p class="subtitle">Subtitle</p>
    1061. 

  1061.         </article>
    1062. 

  1062.       </div>
    1063. 

  1063.       <div class="tile is-parent">
    1064. 

  1064.         <article class="tile is-child box">
    1065. 

  1065.           <p class="title">Two</p>
    1066. 

  1066.           <p class="subtitle">Subtitle</p>
    1067. 

  1067.         </article>
    1068. 

  1068.       </div>
    1069. 

  1069.       <div class="tile is-parent">
    1070. 

  1070.         <article class="tile is-child box">
    1071. 

  1071.           <p class="title">Three</p>
    1072. 

  1072.           <p class="subtitle">Subtitle</p>
    1073. 

  1073.         </article>
    1074. 

  1074.       </div>
    1075. 

  1075.       <div class="tile is-parent">
    1076. 

  1076.         <article class="tile is-child box">
    1077. 

  1077.           <p class="title">Four</p>
    1078. 

  1078.           <p class="subtitle">Subtitle</p>
    1079. 

  1079.         </article>
    1080. 

  1080.       </div>
    1081. 

  1081.     </div>
    1082. 

  1082.     <div class="tile is-ancestor">
    1083. 

  1083.       <div class="tile is-vertical is-9">
    1084. 

  1084.         <div class="tile">
    1085. 

  1085.           <div class="tile is-parent">
    1086. 

  1086.             <article class="tile is-child box">
    1087. 

  1087.               <p class="title">Five</p>
    1088. 

  1088.               <p class="subtitle">Subtitle</p>
    1089. 

  1089.               <div class="content">
    1090. 

  1090.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
    1091. 

  1091.               </div>
    1092. 

  1092.             </article>
    1093. 

  1093.           </div>
    1094. 

  1094.           <div class="tile is-8 is-vertical">
    1095. 

  1095.             <div class="tile">
    1096. 

  1096.               <div class="tile is-parent">
    1097. 

  1097.                 <article class="tile is-child box">
    1098. 

  1098.                   <p class="title">Six</p>
    1099. 

  1099.                   <p class="subtitle">Subtitle</p>
    1100. 

  1100.                 </article>
    1101. 

  1101.               </div>
    1102. 

  1102.               <div class="tile is-parent">
    1103. 

  1103.                 <article class="tile is-child box">
    1104. 

  1104.                   <p class="title">Seven</p>
    1105. 

  1105.                   <p class="subtitle">Subtitle</p>
    1106. 

  1106.                 </article>
    1107. 

  1107.               </div>
    1108. 

  1108.             </div>
    1109. 

  1109.             <div class="tile is-parent">
    1110. 

  1110.               <article class="tile is-child box">
    1111. 

  1111.                 <p class="title">Eight</p>
    1112. 

  1112.                 <p class="subtitle">Subtitle</p>
    1113. 

  1113.               </article>
    1114. 

  1114.             </div>
    1115. 

  1115.           </div>
    1116. 

  1116.         </div>
    1117. 

  1117.         <div class="tile">
    1118. 

  1118.           <div class="tile is-8 is-parent">
    1119. 

  1119.             <article class="tile is-child box">
    1120. 

  1120.               <p class="title">Nine</p>
    1121. 

  1121.               <p class="subtitle">Subtitle</p>
    1122. 

  1122.               <div class="content">
    1123. 

  1123.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    1124. 

  1124.               </div>
    1125. 

  1125.             </article>
    1126. 

  1126.           </div>
    1127. 

  1127.           <div class="tile is-parent">
    1128. 

  1128.             <article class="tile is-child box">
    1129. 

  1129.               <p class="title">Ten</p>
    1130. 

  1130.               <p class="subtitle">Subtitle</p>
    1131. 

  1131.               <div class="content">
    1132. 

  1132.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    1133. 

  1133.               </div>
    1134. 

  1134.             </article>
    1135. 

  1135.           </div>
    1136. 

  1136.         </div>
    1137. 

  1137.       </div>
    1138. 

  1138.       <div class="tile is-parent">
    1139. 

  1139.         <article class="tile is-child box">
    1140. 

  1140.           <div class="content">
    1141. 

  1141.             <p class="title">Eleven</p>
    1142. 

  1142.             <p class="subtitle">Subtitle</p>
    1143. 

  1143.             <div class="content">
    1144. 

  1144.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
    1145. 

  1145.               <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
    1146. 

  1146.             </div>
    1147. 

  1147.           </div>
    1148. 

  1148.         </article>
    1149. 

  1149.       </div>
    1150. 

  1150.     </div>
    1151. 

  1151.     <div class="tile is-ancestor">
    1152. 

  1152.       <div class="tile is-parent">
    1153. 

  1153.         <article class="tile is-child box">
    1154. 

  1154.           <p class="title">Twelve</p>
    1155. 

  1155.           <p class="subtitle">Subtitle</p>
    1156. 

  1156.           <div class="content">
    1157. 

  1157.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
    1158. 

  1158.           </div>
    1159. 

  1159.         </article>
    1160. 

  1160.       </div>
    1161. 

  1161.       <div class="tile is-parent is-6">
    1162. 

  1162.         <article class="tile is-child box">
    1163. 

  1163.           <p class="title">Thirteen</p>
    1164. 

  1164.           <p class="subtitle">Subtitle</p>
    1165. 

  1165.           <div class="content">
    1166. 

  1166.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    1167. 

  1167.           </div>
    1168. 

  1168.         </article>
    1169. 

  1169.       </div>
    1170. 

  1170.       <div class="tile is-parent">
    1171. 

  1171.         <article class="tile is-child box">
    1172. 

  1172.           <p class="title">Fourteen</p>
    1173. 

  1173.           <p class="subtitle">Subtitle</p>
    1174. 

  1174.           <div class="content">
    1175. 

  1175.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
    1176. 

  1176.           </div>
    1177. 

  1177.         </article>
    1178. 

  1178.       </div>
    1179. 

  1179.     </div>
    1180. 

  1180. 

  1181. <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    1182. 

  1182.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1183. 

  1183.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1184. 

  1184.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/p&gt;</span>
    1185. 

  1185.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1186. 

  1186.     <span class="nt">&lt;/article&gt;</span>
    1187. 

  1187.   <span class="nt">&lt;/div&gt;</span>
    1188. 

  1188.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1189. 

  1189.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1190. 

  1190.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/p&gt;</span>
    1191. 

  1191.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1192. 

  1192.     <span class="nt">&lt;/article&gt;</span>
    1193. 

  1193.   <span class="nt">&lt;/div&gt;</span>
    1194. 

  1194.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1195. 

  1195.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1196. 

  1196.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/p&gt;</span>
    1197. 

  1197.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1198. 

  1198.     <span class="nt">&lt;/article&gt;</span>
    1199. 

  1199.   <span class="nt">&lt;/div&gt;</span>
    1200. 

  1200.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1201. 

  1201.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1202. 

  1202.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Four<span class="nt">&lt;/p&gt;</span>
    1203. 

  1203.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1204. 

  1204.     <span class="nt">&lt;/article&gt;</span>
    1205. 

  1205.   <span class="nt">&lt;/div&gt;</span>
    1206. 

  1206. <span class="nt">&lt;/div&gt;</span>
    1207. 

  1207. 

  1208. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    1209. 

  1209.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-vertical is-9"</span><span class="nt">&gt;</span>
    1210. 

  1210.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    1211. 

  1211.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1212. 

  1212.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1213. 

  1213.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Five<span class="nt">&lt;/p&gt;</span>
    1214. 

  1214.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1215. 

  1215.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1216. 

  1216.             <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.<span class="nt">&lt;/p&gt;</span>
    1217. 

  1217.           <span class="nt">&lt;/div&gt;</span>
    1218. 

  1218.         <span class="nt">&lt;/article&gt;</span>
    1219. 

  1219.       <span class="nt">&lt;/div&gt;</span>
    1220. 

  1220.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-8 is-vertical"</span><span class="nt">&gt;</span>
    1221. 

  1221.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    1222. 

  1222.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1223. 

  1223.             <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1224. 

  1224.               <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Six<span class="nt">&lt;/p&gt;</span>
    1225. 

  1225.               <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1226. 

  1226.             <span class="nt">&lt;/article&gt;</span>
    1227. 

  1227.           <span class="nt">&lt;/div&gt;</span>
    1228. 

  1228.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1229. 

  1229.             <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1230. 

  1230.               <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Seven<span class="nt">&lt;/p&gt;</span>
    1231. 

  1231.               <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1232. 

  1232.             <span class="nt">&lt;/article&gt;</span>
    1233. 

  1233.           <span class="nt">&lt;/div&gt;</span>
    1234. 

  1234.         <span class="nt">&lt;/div&gt;</span>
    1235. 

  1235.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1236. 

  1236.           <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1237. 

  1237.             <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Eight<span class="nt">&lt;/p&gt;</span>
    1238. 

  1238.             <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1239. 

  1239.           <span class="nt">&lt;/article&gt;</span>
    1240. 

  1240.         <span class="nt">&lt;/div&gt;</span>
    1241. 

  1241.       <span class="nt">&lt;/div&gt;</span>
    1242. 

  1242.     <span class="nt">&lt;/div&gt;</span>
    1243. 

  1243.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile"</span><span class="nt">&gt;</span>
    1244. 

  1244.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-8 is-parent"</span><span class="nt">&gt;</span>
    1245. 

  1245.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1246. 

  1246.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Nine<span class="nt">&lt;/p&gt;</span>
    1247. 

  1247.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1248. 

  1248.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1249. 

  1249.             <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    1250. 

  1250.           <span class="nt">&lt;/div&gt;</span>
    1251. 

  1251.         <span class="nt">&lt;/article&gt;</span>
    1252. 

  1252.       <span class="nt">&lt;/div&gt;</span>
    1253. 

  1253.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1254. 

  1254.         <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1255. 

  1255.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Ten<span class="nt">&lt;/p&gt;</span>
    1256. 

  1256.           <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1257. 

  1257.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1258. 

  1258.             <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    1259. 

  1259.           <span class="nt">&lt;/div&gt;</span>
    1260. 

  1260.         <span class="nt">&lt;/article&gt;</span>
    1261. 

  1261.       <span class="nt">&lt;/div&gt;</span>
    1262. 

  1262.     <span class="nt">&lt;/div&gt;</span>
    1263. 

  1263.   <span class="nt">&lt;/div&gt;</span>
    1264. 

  1264.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1265. 

  1265.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1266. 

  1266.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1267. 

  1267.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Eleven<span class="nt">&lt;/p&gt;</span>
    1268. 

  1268.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1269. 

  1269.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1270. 

  1270.           <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.<span class="nt">&lt;/p&gt;</span>
    1271. 

  1271.           <span class="nt">&lt;p&gt;</span>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.<span class="nt">&lt;/p&gt;</span>
    1272. 

  1272.         <span class="nt">&lt;/div&gt;</span>
    1273. 

  1273.       <span class="nt">&lt;/div&gt;</span>
    1274. 

  1274.     <span class="nt">&lt;/article&gt;</span>
    1275. 

  1275.   <span class="nt">&lt;/div&gt;</span>
    1276. 

  1276. <span class="nt">&lt;/div&gt;</span>
    1277. 

  1277. 

  1278. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-ancestor"</span><span class="nt">&gt;</span>
    1279. 

  1279.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1280. 

  1280.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1281. 

  1281.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Twelve<span class="nt">&lt;/p&gt;</span>
    1282. 

  1282.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1283. 

  1283.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1284. 

  1284.         <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.<span class="nt">&lt;/p&gt;</span>
    1285. 

  1285.       <span class="nt">&lt;/div&gt;</span>
    1286. 

  1286.     <span class="nt">&lt;/article&gt;</span>
    1287. 

  1287.   <span class="nt">&lt;/div&gt;</span>
    1288. 

  1288.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent is-6"</span><span class="nt">&gt;</span>
    1289. 

  1289.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1290. 

  1290.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Thirteen<span class="nt">&lt;/p&gt;</span>
    1291. 

  1291.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1292. 

  1292.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1293. 

  1293.         <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.<span class="nt">&lt;/p&gt;</span>
    1294. 

  1294.       <span class="nt">&lt;/div&gt;</span>
    1295. 

  1295.     <span class="nt">&lt;/article&gt;</span>
    1296. 

  1296.   <span class="nt">&lt;/div&gt;</span>
    1297. 

  1297.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tile is-parent"</span><span class="nt">&gt;</span>
    1298. 

  1298.     <span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"tile is-child box"</span><span class="nt">&gt;</span>
    1299. 

  1299.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">&gt;</span>Fourteen<span class="nt">&lt;/p&gt;</span>
    1300. 

  1300.       <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">&gt;</span>Subtitle<span class="nt">&lt;/p&gt;</span>
    1301. 

  1301.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
    1302. 

  1302.         <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.<span class="nt">&lt;/p&gt;</span>
    1303. 

  1303.       <span class="nt">&lt;/div&gt;</span>
    1304. 

  1304.     <span class="nt">&lt;/article&gt;</span>
    1305. 

  1305.   <span class="nt">&lt;/div&gt;</span>
    1306. 

  1306. <span class="nt">&lt;/div&gt;</span></code></pre></figure>
    1307. 

  1307.   </div>
    1308. 

  1308. </section>
    1309. 

  1309. 

  1310. 

  1311. <section class="section">
    1312. 

  1312.   <div class="container">
    1313. 

  1313.     <p class="has-text-centered has-text-grey-light">
    1314. 

  1314.       This page is <strong class="has-text-grey">open source</strong>.
    1315. 

  1315.       Noticed a typo? Or something unclear?
    1316. 

  1316.       <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/layout/tiles.html" style="border-bottom: 1px solid currentColor;">
    1317. 

  1317.         Improve this page on GitHub
    1318. 

  1318.       </a>
    1319. 

  1319.     </p>
    1320. 

  1320.   </div>
    1321. 

  1321. </section>
    1322. 

  1322. 

  1323. 

  1324.     
    1325. 

  1325. <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
    1326. 

  1326. 

  1327. <section class="hero is-info bsa">
    1328. 

  1328.   <div class="container">
    1329. 

  1329.     <div class="columns is-vcentered">
    1330. 

  1330.       <div class="column is-4">
    1331. 

  1331.         <p class="title">Bulma <strong>Partners</strong></p>
    1332. 

  1332.         <p class="subtitle">Check out their products!</p>
    1333. 

  1333.       </div>
    1334. 

  1334. 

  1335.       <div class="column is-8">
    1336. 

  1336.         <div class="bsa-cpc"></div>
    1337. 

  1337.       </div>
    1338. 

  1338.     </div>
    1339. 

  1339.   </div>
    1340. 

  1340. </section>
    1341. 

  1341. 

  1342. <script>
    1343. 

  1343.   (function(){
    1344. 

  1344.     if(typeof _bsa !== 'undefined' && _bsa) {
    1345. 

  1345.     _bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
    1346. 

  1346.       target: '.bsa-cpc',
    1347. 

  1347.       align: 'horizontal',
    1348. 

  1348.       disable_css: 'true'
    1349. 

  1349.     });
    1350. 

  1350.       }
    1351. 

  1351.   })();
    1352. 

  1352. </script>
    1353. 

  1353. 

  1354. 

  1355. <section id="newsletter" class="hero is-primary">
    1356. 

  1356.   <div class="hero-body">
    1357. 

  1357.     <div class="container">
    1358. 

  1358.       <!-- Begin MailChimp Signup Form -->
    1359. 

  1359.       <div id="mc_embed_signup" class="columns is-vcentered">
    1360. 

  1360.         <div class="column is-one-third is-left">
    1361. 

  1361.           <p class="title">Bulma <strong>Newsletter</strong></p>
    1362. 

  1362.           <p class="subtitle">Get notified when v1 is ready!</p>
    1363. 

  1363.         </div>
    1364. 

  1364. 

  1365.         <div class="column">
    1366. 

  1366.           <form action="https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&amp;id=52585e8803" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    1367. 

  1367.             <div id="mc_embed_signup_scroll">
    1368. 

  1368.               <div class="field is-grouped">
    1369. 

  1369.                 <div class="control has-icons-left is-expanded">
    1370. 

  1370.                   <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
    1371. 

  1371.                   <span class="icon is-small is-left">
    1372. 

  1372.                     <i class="fa fa-envelope"></i>
    1373. 

  1373.                   </span>
    1374. 

  1374.                 </div>
    1375. 

  1375.                 <div class="control">
    1376. 

  1376.                   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
    1377. 

  1377.                 </div>
    1378. 

  1378.               </div>
    1379. 

  1379.               <div id="mce-responses">
    1380. 

  1380.                 <div class="notification is-danger response" id="mce-error-response" style="display:none"></div>
    1381. 

  1381.                 <div class="notification is-success response" id="mce-success-response" style="display:none"></div>
    1382. 

  1382.               </div>
    1383. 

  1383.               <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    1384. 

  1384.               <div style="position: absolute; left: -5000px;" aria-hidden="true">
    1385. 

  1385.                 <input type="text" name="b_b43b93fe633f0560b2a72a69c_52585e8803" tabindex="-1" value="">
    1386. 

  1386.               </div>
    1387. 

  1387.             </div>
    1388. 

  1388.           </form>
    1389. 

  1389.         </div>
    1390. 

  1390.       </div>
    1391. 

  1391.       <!--End mc_embed_signup-->
    1392. 

  1392.     </div>
    1393. 

  1393.   </div>
    1394. 

  1394. </section>
    1395. 

  1395. 

  1396. <footer class="footer">
    1397. 

  1397.   <div class="container">
    1398. 

  1398.     <div class="columns">
    1399. 

  1399.       <div class="column is-3">
    1400. 

  1400.         <div id="about" class="content">
    1401. 

  1401.           <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
    1402. 

  1402.           <p id="alternative">
    1403. 

  1403.             <a href="http://bulma.io/versions/0.5.2/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
    1404. 

  1404.           </p>
    1405. 

  1405.           
    1406. 

  1406.           <div class="twitter-container">
    1407. 

  1407.             <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
    1408. 

  1408.           </div>
    1409. 

  1409.           
    1410. 

  1410.         </div>
    1411. 

  1411.       </div>
    1412. 

  1412.       <div class="column is-5">
    1413. 

  1413.         <div id="share" class="content">
    1414. 

  1414.           <div>
    1415. 

  1415.             <strong>Support</strong> and share the love!
    1416. 

  1416.           </div>
    1417. 

  1417.           
    1418. 

  1418.           <div id="social">
    1419. 

  1419.             <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
    1420. 

  1420. 

  1421.             <a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.2: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.2" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
    1422. 

  1422. 

  1423.             <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    1424. 

  1424.               <input type="hidden" name="cmd" value="_s-xclick">
    1425. 

  1425.               <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
    1426. 

  1426.               <input type="image" src="http://bulma.io/versions/0.5.2/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
    1427. 

  1427.               <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
    1428. 

  1428.             </form>
    1429. 

  1429. 

  1430.             <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
    1431. 

  1431.           </div>
    1432. 

  1432.           
    1433. 

  1433.         </div>
    1434. 

  1434.       </div>
    1435. 

  1435.       <div class="column is-4">
    1436. 

  1436.         <div id="sister">
    1437. 

  1437.           <p>
    1438. 

  1438.             More <strong>helpful</strong> tools:
    1439. 

  1439.           </p>
    1440. 

  1440.           <ul>
    1441. 

  1441.             <li>
    1442. 

  1442.               <a href="http://cssreference.io">
    1443. 

  1443.                 <img src="http://bulma.io/versions/0.5.2/images/css-reference-logo.png" alt="CSS Reference logo">
    1444. 

  1444.               </a>
    1445. 

  1445.             </li>
    1446. 

  1446.             <li>
    1447. 

  1447.               <a href="http://htmlreference.io">
    1448. 

  1448.                 <img src="http://bulma.io/versions/0.5.2/images/html-reference-logo.png" alt="HTML Reference logo">
    1449. 

  1449.               </a>
    1450. 

  1450.             </li>
    1451. 

  1451.           </ul>
    1452. 

  1452.         </div>
    1453. 

  1453.       </div>
    1454. 

  1454.     </div>
    1455. 

  1455. 

  1456.     <p id="tsp">
    1457. 

  1457.       <small>
    1458. 

  1458.         Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
    1459. 

  1459.         <br>
    1460. 

  1460.         Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
    1461. 

  1461.       </small>
    1462. 

  1462.     </p>
    1463. 

  1463.   </div>
    1464. 

  1464. </footer>
    1465. 

  1465. 

  1466. <script src="http://bulma.io/versions/0.5.2/vendor/clipboard-1.7.1.min.js"></script>
    1467. 

  1467. <script src="http://bulma.io/versions/0.5.2/lib/main.js"></script>
    1468. 

  1468. 

  1469. 

  1470. 

  1471. <div id="fb-root"></div>
    1472. 

  1472. 

  1473. <script async defer type="text/javascript">(function(d, s, id) {
    1474. 

  1474.   var js, fjs = d.getElementsByTagName(s)[0];
    1475. 

  1475.   if (d.getElementById(id)) return;
    1476. 

  1476.   js = d.createElement(s); js.id = id;
    1477. 

  1477.   js.async = true;
    1478. 

  1478.   js.defer = true;
    1479. 

  1479.   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
    1480. 

  1480.   fjs.parentNode.insertBefore(js, fjs);
    1481. 

  1481. }(document, 'script', 'facebook-jssdk'));</script>
    1482. 

  1482. 

  1483. <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
    1484. 

  1484. <script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
    1485. 

  1485. 

  1486. <script async defer type="text/javascript">
    1487. 

  1487.   (function() {
    1488. 

  1488.     window.fnames = new Array();
    1489. 

  1489.     window.ftypes = new Array();
    1490. 

  1490.     fnames[0]='EMAIL';
    1491. 

  1491.     ftypes[0]='email';
    1492. 

  1492.   }());
    1493. 

  1493.   // var $mcj = window.jQuery.noConflict(true);
    1494. 

  1494. </script>
    1495. 

  1495. 

  1496. <script async defer type="text/javascript">
    1497. 

  1497.   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    1498. 

  1498.   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    1499. 

  1499.   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    1500. 

  1500.   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    1501. 

  1501. 

  1502.   ga('create', 'UA-82634666-2', 'auto');
    1503. 

  1503.   ga('send', 'pageview');
    1504. 

  1504. </script>
    1505. 

  1505. 

  1506.   </body>
    1507. 

  1507. </html>
    1508.

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5