1 | ---
|
2 | reference: html
|
3 | ---
|
4 |
|
5 | @# HTML elements
|
6 |
|
7 | In order to avoid conflicts with other stylesheets, Blueprint does not style
|
8 | most HTML elements directly. Instead, we provide several ways to style basic elements:
|
9 |
|
10 | 1. Use Blueprint React components: `<H1>`.
|
11 | 1. Apply the Blueprint `Classes` constant to an HTML tag: `<h1 className={Classes.HEADING}>`.
|
12 | 1. Nest HTML tags inside a container with `Classes.RUNNING_TEXT` (see below).
|
13 |
|
14 | The following elements should be used in this manner:
|
15 |
|
16 | | Component | HTML tag | `Classes` constant |
|
17 | | ------------ | ------------ | ------------------------------------------------------------ |
|
18 | | `H1` - `H6` | `h1` - `h6` | `HEADING` |
|
19 | | `Blockquote` | `blockquote` | `BLOCKQUOTE` |
|
20 | | `Code` | `code` | `CODE` |
|
21 | | `Label` | `label` | `LABEL` - see [Labels](#core/components/label) |
|
22 | | `Pre` | `pre` | `CODE_BLOCK` |
|
23 | | `OL` | `ol` | `LIST` |
|
24 | | `UL` | `ul` | `LIST` |
|
25 | | `HTMLTable` | `table` | `HTML_TABLE` - see [HTML Table](#core/components/html-table) |
|
26 |
|
27 | The React components listed above each support the full set of relevant HTML attributes **and an
|
28 | optional `elementRef` prop** to access the instance of the HTML element itself
|
29 | (not the React component).
|
30 |
|
31 | @## Nested usage
|
32 |
|
33 | Applying `Classes.RUNNING_TEXT` to a container element allows the above HTML
|
34 | elements to be used directly without additional CSS classes.
|
35 | This is very useful for rendering generated markup where you cannot control the
|
36 | exact HTML elements, such as a Markdown document.
|
37 |
|
38 | See the [Running text](#core/typography.running-text) documentation for more information.
|
39 |
|
40 | @## Linting
|
41 |
|
42 | The [**@blueprintjs/eslint-config**](https://www.npmjs.com/package/@blueprintjs/eslint-config)
|
43 | NPM package provides advanced configuration for [ESLint](https://eslint.org/). Blueprint is
|
44 | currently transitioning from [TSLint](https://palantir.github.io/tslint/) to ESLint, and as
|
45 | such, rules are being migrated from TSLint to ESLint. In the meantime, some TSLint rules are
|
46 | being run using ESLint.
|
47 |
|
48 | The [**@blueprintjs/eslint-plugin**](https://www.npmjs.com/package/@blueprintjs/eslint-plugin)
|
49 | package includes a custom `blueprint-html-components` rule that will warn on usages of
|
50 | JSX intrinsic elements (`<h1>`) that have a Blueprint alternative (`<H1>`). See
|
51 | the package's [README](https://www.npmjs.com/package/@blueprintjs/eslint-plugin)
|
52 | for usage instructions.
|