Tiles (Tile set)
- Scott Worthington
- Matthew Gary Page
Tile sets are full of interactive elements such as text, links, and icons associated with a singular thought/action.
See an example of this content type
Adding Tile Set
From the paragraph builder select the button labeled Add Tile Set
Enter the heading for this Tile Set in the Title field.
Under Title Options select whether the Tile Set Title should be aligned left or centered. The default is visually hidden.
Under Tile Size select the number of tiles per row. Medium (3) or Large (2).
Deselect the check box Add Tile Border if you do not want the tiles to have a light gray outline.
If desired, add a horizontal border to separate rows (top, bottom, or both) with the Horizontal Border option.
Adding Tile
In the Tile Builder section, select Add Tile.
Under Icon use the 'Select Icon' button to browse for a Font Awesome icon to use.
You can also enter a Font Awesome (6.5.2 Free version) or Bootstrap class into the text field. To learn more about Font Awesome icons click here.
You can also use the Search field to quickly locate items within the Font Awesome Widget.
In the Color section, select the icon's color.
Enter your heading in the Title field.
Under Title font-size select a font size for the title.
Check the Hide title to hide the Title. This will only work on Tiles without links.
Enter your content in the Body field. For the best results, remove all existing formatting before copying and pasting into this field.
Content limited to 200 characters, remaining: 200
Under Tile Link enter the link for the Tile. Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com . Enter <front> to link to the front page. Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.
In the Attributes section select whether you want use New Window attribute to open the linked document in a new window or tab, while Same Window opens it in the same frame or window as the link.
Adding Tile SVG
In the Tile Builder section, select Add Tile SVG.
Under SVG add the desired SVG embed code.
Enter your heading in the Title field.
Under Title font-size select a font size for the title.
Check the Hide title to hide the Title. This will only work on Tiles without links.
Enter your content in the Body field. For the best results, remove all existing formatting before copying and pasting into this field.
Under Tile Link enter the link for the Tile. Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com . Enter <front> to link to the front page. Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.
In the Attributes section select whether you want use New Window attribute to open the linked document in a new window or tab, while Same Window opens it in the same frame or window as the link.
Adding Tile Brand
In the Tile Builder section, select Add Tile Brand.
Under Icon select the brand icon to use.
Enter your heading in the Title field.
Under Title font-size select a font size for the title.
Enter your content in the Body field. For the best results, remove all existing formatting before copying and pasting into this field.
Check the Hide title to hide the Title. This will only work on Tiles without links.
Under Tile Link enter the link for the Tile. Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com . Enter <front> to link to the front page. Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.
In the Attributes section select whether you want use New Window attribute to open the linked document in a new window or tab, while Same Window opens it in the same frame or window as the link.