HTML elements

Clawscale leaves most HTML elements unstyled, so it does not clash with your own CSS. These components render an element with the Clawscale styles applied.

Usage#

import { Blockquote, Code, H1, OL, Pre, UL } from "@clawscale/react";

Component	Element	`Classes` constant
`H1` to `H6`	`h1` to `h6`	`HEADING`
`Blockquote`	`blockquote`	`BLOCKQUOTE`
`Code`	`code`	`CODE`
`Pre`	`pre`	`CODE_BLOCK`
`UL`	`ul`	`LIST`
`OL`	`ol`	`LIST`
`Label`	`label`	`LABEL`, see Label
`HTMLTable`	`table`	`HTML_TABLE`, see HTML table

Each component accepts the attributes of its element and forwards ref. To style an element you render yourself, add the class instead:

<h1 className={Classes.HEADING}>Revenue report</h1>

Examples#

Headings#

H1 to H6 set the size, weight and color of each level.

Revenue report

North America

United States

Online orders

Refunds

Chargebacks

core/html/headings.tsx

import { H1, H2, H3, H4, H5, H6 } from "@clawscale/react";

export default function HtmlHeadings() {
  return (
    <>
      <H1>Revenue report</H1>
      <H2>North America</H2>
      <H3>United States</H3>
      <H4>Online orders</H4>
      <H5>Refunds</H5>
      <H6>Chargebacks</H6>
    </>
  );
}

Blockquote#

Blockquote sets a quote apart with a rule on its left.

Ingestion for eu-west-1 is paused until the schema migration completes. Queries on this region return data up to 09:00 UTC.

core/html/blockquote.tsx

import { Blockquote } from "@clawscale/react";

export default function HtmlBlockquote() {
  return (
    <Blockquote>
      Ingestion for eu-west-1 is paused until the schema migration completes. Queries on this region return data up to
      09:00 UTC.
    </Blockquote>
  );
}

Code#

Code marks inline code and Pre a block of code. Both use the monospace font.

Raise retention_days to keep partitions longer.

SELECT region, sum(total) AS revenue
FROM orders_daily
GROUP BY region;

core/html/code.tsx

import { Code, Pre } from "@clawscale/react";

export default function HtmlCode() {
  return (
    <>
      <p>
        Raise <Code>retention_days</Code> to keep partitions longer.
      </p>
      <Pre>
        {`SELECT region, sum(total) AS revenue
FROM orders_daily
GROUP BY region;`}
      </Pre>
    </>
  );
}

Lists#

UL renders a bulleted list and OL a numbered one.

us-east-1
eu-west-1
ap-southeast-2

Extract orders from the source database
Remove duplicates by order ID
Load into orders_daily

core/html/lists.tsx

import { OL, UL } from "@clawscale/react";

export default function HtmlLists() {
  return (
    <>
      <UL>
        <li>us-east-1</li>
        <li>eu-west-1</li>
        <li>ap-southeast-2</li>
      </UL>
      <OL>
        <li>Extract orders from the source database</li>
        <li>Remove duplicates by order ID</li>
        <li>Load into orders_daily</li>
      </OL>
    </>
  );
}

Running text#

Generated markup, such as rendered Markdown, has no classes. Wrap it in an element with Classes.RUNNING_TEXT and the plain elements inside get the same styles. See Typography.

<div className={Classes.RUNNING_TEXT}>
  <h2>Retention</h2>
  <p>
    Partitions older than <code>retention_days</code> are dropped.
  </p>
</div>