You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Tile Component is a versatile, reusable UI element. It's designed to be flexible and adaptable, capable of serving a variety of functions in a User interface. The Tile Component displays content, acts as a clickable or selectable element, and houses an icon.
12
8
13
9
It's designed to group related information in flexible containers and can contain text, images, and/or a block of color. The usage guidance for the Tile Component is intentionally high-level, focusing specifically on the tile's structure and responsiveness to the grid. It lacks pre-set styles for the content, allowing for the display of a wide variety of content. This flexibility makes tiles suitable for various use cases, such as displaying feature highlights, providing navigation options, or presenting data summaries, including information, getting started guides, how-to guides, and more.
14
10
15
11
CSS class definitions
16
-
---------------------
12
+
=====================
13
+
14
+
The Tile Component consists of the following classes:
17
15
18
16
``.tile``
19
17
This is the base class for the Tile Component. It sets up the basic appearance and layout of the tile, including its size, padding, background color, and border radius. It also sets up some default styles for when the tile is in focus.
@@ -24,8 +22,8 @@ CSS class definitions
24
22
``.tile-icon``
25
23
Use this class for an icon within the tile to position it and set its color. It also includes styles for a inactive icon.
26
24
27
-
How to use
28
-
----------
25
+
How to use the Tile Component
26
+
=============================
29
27
30
28
To use the Tile Component, you need to add the ``.tile`` class to an HTML element. If you want the tile to be clickable or selectable, add the ``.tile-clickable`` or ``.tile-selectable`` class as well. If you want to include an icon in the tile, add an element with the ``.tile-icon`` class inside the tile.
31
29
@@ -44,16 +42,15 @@ To use the Tile Component, you need to add the ``.tile`` class to an HTML elemen
44
42
</a>
45
43
46
44
47
-
Examples
48
-
--------
45
+
Examples using the Tile Component
46
+
---------------------------------
49
47
50
-
.. image:: design/images/tile.png
48
+
.. image:: images/tile.png
51
49
:alt:Base tile used to display import file information
52
50
53
-
.. image:: pdesign/images/tile-clickable.png
51
+
.. image:: images/tile-clickable.png
54
52
:alt:Example of a clickable tile used to create an expressive link
55
53
56
-
57
54
.. note::
58
55
59
56
When a tile isn't clickable, you must use a ``<div>`` tag. Use a ``<a>`` tag only when turning the tile into a clickable element.
0 commit comments