HTML Elements

Introduction

In order to avoid conflicts with other stylesheets, we do not style most HTML elements directly. Instead, we provide several ways to style basic elements:

  1. Use React components: <H1>.
  2. Apply the Classes constant to an HTML tag: <h1 className={Classes.HEADING}>.
  3. Nest HTML tags inside a container with Classes.RUNNING_TEXT (see below).

The following elements should be used in this manner:

ComponentHTML tagClasses constant
H1 - H6h1 - h6HEADING
BlockquoteblockquoteBLOCKQUOTE
CodecodeCODE
LabellabelLABEL - see Labels
PrepreCODE_BLOCK
OLolLIST
ULulLIST
HTMLTabletableHTML_TABLE - see HTML Table

The React components listed above each support the full set of relevant HTML attributes and an optional elementRef prop to access the instance of the HTML element itself (not the React component).

Applying Classes.RUNNING_TEXT to a container element allows the above HTML elements to be used directly without additional CSS classes. This is very useful for rendering generated markup where you cannot control the exact HTML elements, such as a Markdown document.

Included Components

  1. H1: The equivalent of an <h1> html tag.
  2. H2: The equivalent of an <h2> html tag.
  3. H3: The equivalent of an <h3> html tag.
  4. H4: The equivalent of an <h4> html tag.
  5. H5: The equivalent of an <h5> html tag.
  6. H6: The equivalent of an <h6> html tag.
  7. Blockquote: The equivalent of a <blockquote> html tag.
  8. Code: The equivalent of a <code> html tag.
  9. Label: The equivalent of a <label> html tag.
  10. Pre: The equivalent of a <pre> html tag.
  11. OL: The equivalent of an <ol> html tag.
  12. UL: The equivalent of a <ul> html tag.
  13. HTMLTable: The equivalent of a <table> html tag.

Examples

My H1 Component

Another h1

My H2 Component

Another h2

My H3 Component

Another h3

My H4 Component

Another h4

My H5 Component
Another h5
My H6 Component
Another h6
In order to avoid conflicts with other stylesheets, we do not style most HTML elements directly. Instead, we provide several ways to style basic elements
log "Hello, world!";
Yes
No
Maybe
Here is some preformatted text.
  1. List Item 1
  2. List Item 2
  3. List Item 3
  • List Item A
  • List Item B
  • List Item C
ComponentHTML Tag
H1 - H6h1 - h6
Blockquoteblockquote

Usage

H1

1import React from "react";
2import { H1 } from "@commure/components-foundation";
3
4function MyH1() {
5 return <H1>My H1 Component</H1>;
6}
7
8export default MyH1;

H2

1import React from "react";
2import { H2 } from "@commure/components-foundation";
3
4function MyH2() {
5 return (
6 <H2>My H2 Component<H2/>
7 );
8}
9
10export default MyH2;

H3

1import React from "react";
2import { H3 } from "@commure/components-foundation";
3
4function MyH3() {
5 return (
6 <H3>My H3 Component<H3/>
7 );
8}
9
10export default MyH3;

H4

1import React from "react";
2import { H4 } from "@commure/components-foundation";
3
4function MyH4() {
5 return <H4>My H4 Component</H4>;
6}
7
8export default MyH4;

H5

1import React from "react";
2import { H5 } from "@commure/components-foundation";
3
4function MyH5() {
5 return <H5>My H5 Component</H5>;
6}
7
8export default MyH5;

H6

1import React from "react";
2import { H6 } from "@commure/components-foundation";
3
4function MyH6() {
5 return <H6>My H6 Component</H6>;
6}
7
8export default MyH6;

Blockquote

1import React from "react";
2import { Blockquote } from "@commure/components-foundation";
3
4function MyBlockquote() {
5 return (
6 <Blockquote>
7 In order to avoid conflicts with other stylesheets, we do not style most
8 HTML elements directly. Instead, we provide several ways to style basic
9 elements
10 </Blockquote>
11 );
12}
13
14export default MyBlockquote;

Code

1import React from "react";
2import { Code } from "@commure/components-foundation";
3
4function MyCode() {
5 return <Code>log "Hello, HTML Elements!";</Code>;
6}
7
8export default MyCode;

Label

1import React from "react";
2import { Label } from "@commure/components-foundation";
3
4function MyLabel() {
5 return <Label>Some Label Component Text</Label>;
6}
7
8export default MyLabel;

Pre

1import React from "react";
2import { Pre } from "@commure/components-foundation";
3
4function MyPre() {
5 return <Pre>Here is some preformatted text.</Pre>;
6}
7
8export default MyPre;

OL

1import React from "react";
2import { OL } from "@commure/components-foundation";
3
4function MyOL() {
5 return (
6 <OL>
7 <li>List Item 1</li>
8 <li>List Item 2</li>
9 <li>List Item 3</li>
10 </OL>
11 );
12}
13
14export default MyOL;

UL

1import React from "react";
2import { UL } from "@commure/components-foundation";
3
4function MyUL() {
5 return (
6 <UL>
7 <li>List Item A</li>
8 <li>List Item B</li>
9 <li>List Item C</li>
10 </UL>
11 );
12}
13
14export default MyUL;

HTMLTable

1import React from "react";
2import { HTMLTable } from "@commure/components-foundation";
3
4function MyHTMLTable() {
5 return (
6 <HTMLTable>
7 <tr>
8 <th>Component</th>
9 <th>HTML Tag</th>
10 </tr>
11 <tr>
12 <td>H1 - H6</td>
13 <td>h1 - h6</td>
14 </tr>
15 <tr>
16 <td>Blockquote</td>
17 <td>blockquote</td>
18 </tr>
19 </HTMLTable>
20 );
21}
22
23export default MyHTMLTable;

API Reference

HTMLTable

Prop NameRequired?TypeDescription
borderedfalsebooleanEnables borders between rows and cells.
condensedfalsebooleanUse small, condensed appearance.
elementReffalse(ref: HTMLTableElement | null) => voidRef handler to access the instance of the internal HTML element.
interactivefalsebooleanEnables hover styles on row.
smallfalsebooleanUse small, condensed appearance for this element and all child elements.
stripedfalsebooleanUse an alternate background color on odd rows.

Related Reading

Blueprint Reference
Blueprint Reference (Table)