Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Tile

Tile is a component which serves as a flexible content container.

Examples

Example that uses all the available r-tile slots.

tile-with-all-slots.vue

API

Slots

NameDescription
title

Can accept tags from h1 to h6 tag

titleActions

For any button or link

contents

Displays multiple sections, use v-content directive to display primary or secondary content types.

primary

Primary content of the tile

secondary

Secondary content of the tile

actions

For any buttons if you want to use tile as form

Edit this page
Last Updated: 7/25/24, 5:49 PM
Contributors: Alberto Gualis, John Hannagan, Weetbix, mehicalen
Prev
Tabs
Next
Toast