{"id":297,"date":"2018-06-08T13:41:13","date_gmt":"2018-06-08T13:41:13","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=297"},"modified":"2026-08-25T19:03:26","modified_gmt":"2026-08-25T19:03:26","slug":"tiles","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/tiles\/","title":{"rendered":"Tiles"},"content":{"rendered":"\n<style>.cl-tiles.demo { margin-bottom: 2rem; } .cl-tiles.demo>div { background: #ddd; border: 1px solid #ccc; }<\/style>\n\n\n\n<p class=\"type-intro wp-block-paragraph\">Use tiles to arrange components or other content in columns or a grid.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Tiles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On sites using the older Classic Editor, tiles can be added by choosing the Tiles pictograph (<img decoding=\"async\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/tiles_wysiwyg.png\" alt=\"Tiles WYSIWYG toolbar icon\" class=\"wysiwyg-icon\">) from the editor&#8217;s toolbar. Use the editor dialogue to add content and adjust options. To edit the tiles later, double-click the tile preview to show the editor dialogue again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On sites using the either the Block Editor or the older Classic Editor, tiles can also be added using HTML (see the below documentation).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using HTML<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tiles are implemented with the class <code class=\"class\">cl-tiles<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tiles support grids with two, three, four, or five tiles in width. The number of tiles across the page can be controlled by the classes <code class=\"class second\">halves<\/code>, <code class=\"class second\">thirds<\/code>, <code class=\"class second\">fourths<\/code>, and <code class=\"class second\">fifths<\/code>, respecively. Tile grids can contain an infinite number of tiles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For each of the examples below, note how tiles wrap when the size of the browser is adjusted. The number of tiles across will change depending on how much space there is, up to the maximum set by the class.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Two tiles across<\/h4>\n\n\n\n<script src=\"https:\/\/gist.github.com\/uriwebcom\/491ee5e07f5a37f7a16677b6402a5015.js\"><\/script>\n<div class=\"cl-tiles halves square demo\">\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Three tiles across<\/h4>\n\n\n\n<script src=\"https:\/\/gist.github.com\/uriwebcom\/c26d9a84ad5286382f2b886d12f21253.js\"><\/script>\n<div class=\"cl-tiles thirds square demo\">\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Four tiles across<\/h4>\n\n\n\n<script src=\"https:\/\/gist.github.com\/uriwebcom\/851eeeea9eedd079a432fee2d97d7e61.js\"><\/script>\n<div class=\"cl-tiles fourths square demo\">\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Five tiles across<\/h4>\n\n\n\n<script src=\"https:\/\/gist.github.com\/uriwebcom\/9b374946bd2264afe9ca9a65a2d5089f.js\"><\/script>\n<div class=\"cl-tiles fifths square demo\">\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Square tiles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By default, tiles adjust to the size of their content. To override this format and force tiles be square, and crop their content accordingly, add the class <code class=\"class\">square<\/code><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/uriwebcom\/07821c5aa8762a532c1a83f650770ad4.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Compact tiles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By default, each tile has small left and right margins that separate it from surrounding tiles. To eliminate these margins and force tiles to but up against one another, add the class <code class=\"class\">compact<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both default tiles and square tiles can be compact. Note that tiles never have bottom margins; instead, they rely on inner content to provide apparent vertical separation.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/uriwebcom\/80dcdfdf65ddd936b33c0e64468629e7.js\"><\/script>\n<div class=\"cl-tiles fourths square compact demo\">\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<div>&nbsp;<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use tiles to arrange components or other content in columns or a grid. Adding Tiles On sites using the older Classic Editor, tiles can be added by choosing the Tiles pictograph () from the editor&#8217;s toolbar. Use the editor dialogue to add content and adjust options. To edit the tiles later, double-click the tile preview [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-297","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":15,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/297\/revisions"}],"predecessor-version":[{"id":3028,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/297\/revisions\/3028"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}