Skip to content

Commit 19f8912

Browse files
committed
Fix Vale issues, heading nesting
1 parent a1666de commit 19f8912

File tree

1 file changed

+12
-15
lines changed

1 file changed

+12
-15
lines changed

docs/design/tiles.rst

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
.. vale off
2-
3-
Tile component documentation
4-
=============================
5-
6-
.. vale on
1+
Using the Tile Component
2+
########################
73

84
Overview
9-
--------
5+
********
106

117
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.
128

139
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.
1410

1511
CSS class definitions
16-
---------------------
12+
=====================
13+
14+
The Tile Component consists of the following classes:
1715

1816
``.tile``
1917
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
2422
``.tile-icon``
2523
Use this class for an icon within the tile to position it and set its color. It also includes styles for a inactive icon.
2624

27-
How to use
28-
----------
25+
How to use the Tile Component
26+
=============================
2927

3028
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.
3129

@@ -44,16 +42,15 @@ To use the Tile Component, you need to add the ``.tile`` class to an HTML elemen
4442
</a>
4543

4644

47-
Examples
48-
--------
45+
Examples using the Tile Component
46+
---------------------------------
4947

50-
.. image:: design/images/tile.png
48+
.. image:: images/tile.png
5149
:alt: Base tile used to display import file information
5250

53-
.. image:: pdesign/images/tile-clickable.png
51+
.. image:: images/tile-clickable.png
5452
:alt: Example of a clickable tile used to create an expressive link
5553

56-
5754
.. note::
5855

5956
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

Comments
 (0)