Elements are theme-aware versions of their html primitives.
Styling is scoped to the component preventing global css scope pollution.
import { H1 } from '@cozmos-ui/elements' ;
< H1 > The Quick Brown Fox </ H1 >
< H2 > The Quick Brown Fox </ H2 >
< H3 > The Quick Brown Fox </ H3 >
< H4 > The Quick Brown Fox </ H4 >
< H5 > The Quick Brown Fox </ H5 >
< H6 > The Quick Brown Fox </ H6 >
< P >
< Strong > Bilge water </ Strong > Admiral of the Black swab tack bucko hempen
of thunder gun killick . Sail ho loot draught wench boatswain gabion galleon
cutlass rutters lateen sail . < A > Bilge water gibbet </ A > .
</ P >
< Blockquote >
"Bilge water Admiral of the Black swab tack bucko hempen of thunder gun
killick . "
</ Blockquote >
< P >
< B > Bilge water </ B > Admiral of the Black swab tack bucko hempen
of thunder gun killick . Sail ho loot draught wench boatswain gabion galleon
cutlass rutters lateen sail . < A > Bilge water gibbet </ A > .
</ P >
< Ul >
< Li > Item One </ Li >
< Li > Item Two </ Li >
< Li > Item Three </ Li >
</ Ul >
< Ol >
< Li > Item One </ Li >
< Li > Item Two </ Li >
< Li > Item Three </ Li >
</ Ol >
It's generally recommended to use the library's Datagrid component.
But, sometimes a simple table is all that's needed.
< Table >
< thead >
< tr >
< Th > Column One </ Th >
< Th > Column Two </ Th >
< Th > Column Three </ Th >
</ tr >
</ thead >
< tbody >
< tr >
< Td > Cell One </ Td >
< Td > Cell Two </ Td >
< Td > Cell Three </ Td >
</ tr >
< tr >
< Td > Cell One </ Td >
< Td > Cell Two </ Td >
< Td > Cell Three </ Td >
</ tr >
</ tbody >
</ Table >
The variant prop enables an element to appear as though it was another, decoupling html and visual heirarchies.
Here's the same example from the headings section above, but with the visual order reversed.
< H1 variant = " h6 " > The Quick Brown Fox </ H1 >
< H2 variant = " h5 " > The Quick Brown Fox </ H2 >
< H3 variant = " h4 " > The Quick Brown Fox </ H3 >
< H4 variant = " h3 " > The Quick Brown Fox </ H4 >
< H5 variant = " h2 " > The Quick Brown Fox </ H5 >
< H6 variant = " h1 " > The Quick Brown Fox </ H6 >
Name Theme Key <A>styles.a <B>styles.b <Blockquote>styles.blockquote <H1>styles.h1 <H2>styles.h2 <H3>styles.h3 <H4>styles.h4 <H5>styles.h5 <H6>styles.h6 <Hr>styles.hr <Img>styles.img <Li>styles.li <Ol>styles.ol <P>styles.p <Pre>styles.pre <Strong>styles.strong <Table>styles.table <Td>styles.td <Th>styles.th <Ul>styles.ul
Name Type Required Default Description variant enum No --- Styles an element as another, decoupling html and visual heirarchies.