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

import React from "react";
import { H1 } from "@commure/components-foundation";
function MyH1() {
return (
<H1>My H1 Component</H1>
);
}
export default MyH1;

H2

import React from "react";
import { H2 } from "@commure/components-foundation";
function MyH2() {
return (
<H2>My H2 Component<H2/>
);
}
export default MyH2;

H3

import React from "react";
import { H3 } from "@commure/components-foundation";
function MyH3() {
return (
<H3>My H3 Component<H3/>
);
}
export default MyH3;

H4

import React from "react";
import { H4 } from "@commure/components-foundation";
function MyH4() {
return (
<H4>My H4 Component</H4>
);
}
export default MyH4;

H5

import React from "react";
import { H5 } from "@commure/components-foundation";
function MyH5() {
return (
<H5>My H5 Component</H5>
);
}
export default MyH5;

H6

import React from "react";
import { H6 } from "@commure/components-foundation";
function MyH6() {
return (
<H6>My H6 Component</H6>
);
}
export default MyH6;

Blockquote

import React from "react";
import { Blockquote } from "@commure/components-foundation";
function MyBlockquote() {
return (
<Blockquote>
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
</Blockquote>
);
}
export default MyBlockquote;

Code

import React from "react";
import { Code } from "@commure/components-foundation";
function MyCode() {
return (
<Code>log "Hello, HTML Elements!";</Code>
);
}
export default MyCode;

Label

import React from "react";
import { Label } from "@commure/components-foundation";
function MyLabel() {
return (
<Label>Some Label Component Text</Label>
);
}
export default MyLabel;

Pre

import React from "react";
import { Pre } from "@commure/components-foundation";
function MyPre() {
return (
<Pre>Here is some preformatted text.</Pre>
);
}
export default MyPre;

OL

import React from "react";
import { OL } from "@commure/components-foundation";
function MyOL() {
return (
<OL>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</OL>
);
}
export default MyOL;

UL

import React from "react";
import { UL } from "@commure/components-foundation";
function MyUL() {
return (
<UL>
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</UL>
);
}
export default MyUL;

HTMLTable

import React from "react";
import { HTMLTable } from "@commure/components-foundation";
function MyHTMLTable() {
return (
<HTMLTable>
<tr>
<th>Component</th>
<th>HTML Tag</th>
</tr>
<tr>
<td>H1 - H6</td>
<td>h1 - h6</td>
</tr>
<tr>
<td>Blockquote</td>
<td>blockquote</td>
</tr>
</HTMLTable>
);
}
export 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)