Tiles


Build for interaction and style with the Tiles Design Element. Organize a series of links, images, or content into individual blocks that bring together functionality and style to your page.








Tiles Examples


Example 1


Database
Services
Team
Planner
Contacts

Example 2


Marc Pitt
Main Developer
Anna Kendrick
Support Service
John Davis
Chief Financial Officer
Irene Cara
Accountant
Kara Pacitto
Manager
Tom Brady
CEO

Example 3


Departments
Human Resources
Inf. Technology
Management
Procurement
Training
Finance

Tips and Tricks
The following example will cover the page from left to right. Why? Because Force full width option on the section is on.


Example 4


Meet our Support Team

 

Marc Tomphson
Main Developer
Anna Kendrick
Support Service
John Davis
Chief Financial Officer
Irene Cara
Accountant
Kara Pacitto
Manager
Tom Brady
CEO


Example 5


TRAINING
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
RESOURCES
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Planner
Employees
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Finance
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Management
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Operаtions
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
News
Security
Presentation
Services
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Support
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Example 6


DOCUMENTS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida, enim tempus iaculis aliquam, leo enim feugiat sapien, ac faucibus risus erat et lorem.
CLOUD
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
MANAGEMENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Finance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida, enim tempus iaculis aliquam, leo enim feugiat sapien, ac faucibus risus erat et lorem.
Organizer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida, enim tempus iaculis aliquam, leo enim feugiat sapien, ac faucibus risus erat et lorem.
EVENTS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida, enim tempus iaculis aliquam, leo enim feugiat sapien, ac faucibus risus erat et lorem.
Company Stats
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida, enim tempus iaculis aliquam, leo enim feugiat sapien, ac faucibus risus erat et lorem.
Contacts
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida, enim tempus iaculis aliquam, leo enim feugiat sapien, ac faucibus risus erat et lorem.
REPORTS
SERVICES
DATABASE

Example 7: With Custom CSS


LATEST STATS
DOCUMENTS
CLOUD
CONTACTS
HUMAN RESOURCES
DATABASE
REPORTS
SERVICES

Example 8: Always in One Line



Tips and Tricks
This eight Tiles will be always in one line no matter how small screen width you have. How can you do this? Lets take your screen width as a 100%. Divide this by the number of tiles you want to show. In our case we have 8 tiles, so it will be: 100/8=12,5. Lets take the integer number 12. So Every of the tile will have 12% of the screen width. Go to the Advanced tab, and find the section called "Custom Size". Put this number (12) inside the field called "Width". In the same Advanced tab choose an option called "Make Tiles responsive". With this option your Tiles will fill the whole page width.




Tiles Options Demos


Default Tiles


With Icons


Colors


One Different Color


All Same Colors


Background Image


Full Image


With Color Transparency


Responsive Tiles


Different Icon Color


Different Text Color


Different Spacing


Spacing = 0


Spacing = 2x


Spacing = 3x


Shape Styles


Shape Tall


Shape Wide


Blur Effect


None Blur
Light Blur
Medium Blur
Strong Blur

Different Styles


Style Sarah (No Background)


Style Sarah (With Background)


Style Bordered


Style Flat


Style Flip (No Background)


Style Flip (With Background)


Text Alignment


Left
Center
Right

Linking Options


Different Sizes


Small Size


Medium Size


Large Size


Custom Size


Width: 200px Height: 400px
This Tile has a custom width and height
Width: 400px Height: 200px
This Tile has a custom width and height
Width: 100% Height: 80px
This Tile has a custom width and height

Options Description

Title – text will be displayed as title
Description – text will be displayed as description below title
Link – the entire tile will be link
Linking options – the behaviour of the link:
  • Default – by default link will be opened in the same window
  • LightBox – your Link will be opened in the lightbox
  • New window – your link will be opened in the new tab
  • Dialog – your Link will be opened in the dialog window
Icon – display icon inside the tile. All ShortPoint Icons are supported
Color – defined colors for tiles like: primary, info, success, warning, danger. All ShortPoint Colors are supported
Color Transparency – transparency of color. Used with images
Icon Color – transparency of color. Tile icon color
Text Color – tile text color (description, title, some specific elements depending on style)
Text Size – change the default text size
Responsive – enables responsive mode (tiles try to fit to container size)
Width – WIDTH AND HEIGHT options override size and shape options
Height – WIDTH AND HEIGHT options override size and shape options
Size – predefined sizes. Use width and height for advanced sizing. We recommend to use size and shape. You can choose one of the following sizes:
  • Small
  • Medium
  • Large
  • Huge
Spacing – spacing between tiles:
  • Spacing = 0
  • Spacing = 2x
  • Spacing = 3x
  • Default Spacing
Image – add background image for the tile
Shape – change the shape of the tile
Blur – apply blurry effect to the tile background. Work with images:
  • Light
  • Medium
  • Strong
Style – change the Tile style:
  • Sarah
  • Flat
  • Bordered
  • Flip
Alignment – text horizontal alignment:
  • Left
  • Right
  • Center