Tile

The jhdocs-tile shortcode displays a link button with an icon, title, and description. When the user presses the button, it navigates to a specific URL.

Tiles can be especially useful in your site’s home page or at the root of major sections of your site, where they can help lead the user down into lower sections of documentation.

The shortcode takes the following parameters:

• title: Tile title
• detail: Tile detail
• icon: Tile icon
• url: URL accessed when the user presses the tile

Tiles use a floating format, meaning they will flow from left-to-right, top-to-bottom, fitting within the available width. Because of this, you must nest your jhdocs-tile shortcode within a tile list, placing all jhdocs-tile elements within opening and closing tags for the jhdocs-tile-list shortcode. This shortcode takes no parameters, it simply contains all tiles.

If you forget to nest your jhdocs-tile elements within opening and closing jhdocs-tile-list elements, all content after the tiles will display wonky.

Examples

Here is a list of three tiles that link to sections of the Digital Toolkit documentation.

        
{{< jhdocs-tile-list >}}

{{< jhdocs-tile
    title="Accessing the Digital Toolkit"
    detail="Sign up for a developer account, create a test user, and start building with Jack Henry today!"
    icon="star-empty"
    url="https://jackhenry.dev/open-api-docs/accessing-the-digital-toolkit/" >}}

{{< jhdocs-tile
    title="Plugin Framework"
    detail="Plug your products directly into the user's dashboard using our plugin framework."
    icon="devices"
    url="https://jackhenry.dev/open-api-docs/plugins/" >}}

{{< jhdocs-tile
    title="Consumer API"
    detail="Securely retrieve the user's financial account and transaction data for use in your products."
    icon="user"
    url="https://jackhenry.dev/open-api-docs/consumer-api/" >}}

{{< /jhdocs-tile-list >}}
      

Here is the rendered result of this markdown: