Product support

Get help in the plugin support forum.


An OctoberCMS plugin for easy creation and usage of cards (tiles). Templates use TailwindCSS by default. The plugin supports 'out of the box' the TailwindCSS-based cards format used by FateFactory, so that you can use FF's visual card browser, pick your favourite card, and use it in your website.

Plugin contains both components and snippets for use either in 'CMS' pages or 'Static Pages':

  • Section component to display a section of cards
  • Card component to display sub-page with content of a single card.


Install plugin as usual:

  • using the OctoberCMS Marketplace or
  • get it from GitHub

If you choose manual install (e.g. using GitHub), make sure to intialize the database tables using the cli command php artisan october:up. This will create two tables.

Configuration and usage


Backend - Tiles component main interface

Start by adding at least one new section. In the section editor, provide at least the name, and turn the visibility of the section on.

A section constitutes a category of cards to be displayed on a specific page. Using the provided component, you can select a single section of tiles to be displayed. Each section can have a default display style, but it can be overriden in the CMS or StaticPage configuration, so that you can have the same dataset displayed using different styles on different pages.

Backend - create new section of tiles

The section editor has three tabs:

  • The MAIN tab lets you define the basic (required) settings, and you can start adding new cards directly inside the section editor.
  • The LAYOUT tab has a code editor, empty by default, typically used with the FateFactory.com to paste any card TWIG code from the FateFactory

Backend - create - layout tab

  • The LABELS tab should be ignored for now - in future versions, it will allow you to override the default Card fields with custom ones.

Then create one or more individual cards in the "cards" section.

Section templates

Card sections can use different layout templates.

A default template has been defined in the plugin (plugins\cjkpl\tiles\components\section\tileset1.htm), you can also add new templates into your theme as partials located in THEME-FOLDER/partials/tiles/. For example, if you copy the default tileset1.htm into THEME-FOLDER/partials/tiles/homepage.htm, it will be listed in the component Layouts selector as 'homepage.htm'.

Use either tileset1.htm or any TWIG card template from FateFactory.com as an inspiration for your new card layouts.


The card editor affects the CONTENT of the card only, not the layout! Think of it as content editor. If you want to change the layout, change the whole section template as described above. You cannot have different card layouts for individual cards, at least not using any of the built-in or FateFactory.com card designs.

Card editor contains a set of typical fields used in Cards or Tiles. They are divided into tabs. Individual fields are mapped onto the TWIG variables defined in the section templates. Twig field names are listed below each field to help you work with the card templates.

  • Misc - contains the most frequently used fields, like Title ({{ card.title }}), background image ({{ card.image }})
  • Person - fields used in personal cards, like name, status, photo, etc.
  • Tags and URLs - if the card is clickable, the URL field should be completed; If the card layout supports tags, you can add them here.
  • Card content - since v.1.0.7 a new component is available, to display content of a single card. By default the Card content field is displayed by the component. The component uses card id to link the detail page, so the URL of the card detail page should look like this: /tiles/tile/:id (it should end with the id parameter)
  • Custom sets - this part is currently under development

See in the example below, how a TWIG template from FateFactory.com allows automatic mapping of the Tag field onto a card definition: Card field mapping

Using in CMS and static pages

Backend - add component (or snippet) to a page

The screenshot above shows the dialog inside a snippet added to a StaticPage. A similar setup can be done using plain CMS pages, instead of a snippet, use a component.

The Dialog for configuring a "Section of Cards" contains the following options:

  • Columns: the number of columns in one row. Most card definitions at FateFactory nicely respond to browser window size changes.
  • Layout: defines the card template to use. By default, it will use plugins\cjkpl\tiles\components\section\tileset1.htm. Note, if you decide to fork the component in the backend page editor, it will clone just the plugins\cjkpl\tiles\components\section\default.htm, which is not enough - most likely will want to edit the tileset1.htm as well, as this is where the cards are defined. The default.htm merely decides which layout to load: a default one, an inline one (i.e. one defined in the "Section Layout" form editor), or one of the partials defined in THEME-FOLDER/partials/tiles/
  • Language filter: author's personal requirements called for an easy way to add cards in multiple languages (also in one section), and this option allows you to select for display only cards in a specific language.
  • Section: decides which of the sections defined in the Tiles Section editor in the backend should be displayed. You can only display one section at a time.
  • Link/content page: (1.0.7+) - a CMS page with "Card" component added, to display card content details. This is useful for building simple content page with cards used as "list of posts" kind of view, timelines with detail view, etc.

Temporarily removed custom column types (in future versions it will be restored as a dependency on another plugin).

Jan 22, 2021


Updated table cjkpl_tiles_sections. + parent_id for child/parent sections. + sort_orders for section sorting. + slug for seo-friendly urls. + is_seo for cjkpl.seo events. + description.

Jan 22, 2021


Updated table cjkpl_tiles_cards - added is_seo to determine if the card content is to be included in SEO (e.g. in cjkpl.seo)

Jan 21, 2021


Added $REF / {{ __self__.REF }} variable in the Section and Card components, for convenience of easy returning from a detail page to a tile list page.

Dec 16, 2020


Added support for privileges (cards and sections)

Dec 13, 2020


Backend / card list changes. 1. Implemented Sortable on Cards. 2. Added Card duplicate button in Card list. 3. Added card filtering in Card list.

Dec 13, 2020


Added support for override of selected section(s) via URL (/page/1,2,3) in Section component. As sections do not yet have sort_order column, they are sorted by ID.

Dec 13, 2020


Fixed broken update 1.0.11

Sep 22, 2020


Updated table cjkpl_tiles_cards - changed tags_url to text, string was too short

Sep 22, 2020


Updated table cjkpl_tiles_cards renamed tags_url_pattern to tags_url which will now become a repeater field

Sep 22, 2020


Fixed an `ok to auto-link` condition in Section

Aug 15, 2020


Added code to detect if card URL has been explicitly set, and if it is not set, but autolink_content is set and some content is present, to inject into the card.url field in the Section component an automatically generated link to the card content page.

Aug 12, 2020


Table cjkpl_tiles_cards - added card content section, new fields in card editor, and new component to display single card content

Aug 12, 2020


Removed external dependency with GetCommonLanguageOptions.

Aug 08, 2020


Updated table cjkpl_tiles_sections

Aug 08, 2020


Updated table cjkpl_tiles_cards

Aug 08, 2020


Created table cjkpl_tiles_sections

Jul 29, 2020


Created table cjkpl_tiles_cards

Jul 29, 2020


Initialize plugin.

Jul 29, 2020