Components

Info boxes

This is a generic Info box.

This is an Info box of type “info”.

This is an Info box of type “success”.

Everyday carry glossier fashion axe 8-bit, helvetica stumptown offal hammock farm-to-table af church-key enamel pin franzen letterpress. Vaporware cardigan forage raclette copper mug you probably haven’t heard of them migas bushwick drinking vinegar swag pour-over.

This is an Info box of type “warning”.

Everyday carry glossier fashion axe 8-bit, helvetica stumptown offal hammock farm-to-table af church-key enamel pin franzen letterpress.

This is an Info box of type “error”.

Vaporware cardigan forage raclette copper mug you probably haven’t heard of them migas bushwick drinking vinegar swag pour-over.

Tables

Table processing in markdown does not have support for a tfoot section, row headings, caption, nor the scope attribute. Here are examples first in HTML and then in markdown.

Table with headings both in and out of the `thead` and a `caption`

HTML version

Sample caption.
Heading within the thead section	Heading	Numeric Data
A `th` within the tbody section	A `td` (data)	419.10
Heading	Lorem ipsum sit dolor amet	50.81
Heading	Data	0.72
Heading	Data	1016.99

Markdown version

Heading within the thead section	Heading	Numeric Data
A th within the tbody section	A td (data)	419.10
Heading	Lorem ipsum sit dolor amet	50.81
Heading	Data	0.72
Heading	Data	1016.99

The markdown versions will just keep getting worse from here on, so there is no point for them. The shortcode table is used as a helper.

A bigger table showing how overflow works with sticky column and row headers.
Author	Title	Year	ISBN-13	ISBN-10
Miguel De Cervantes	The Ingenious Gentleman Don Quixote of La Mancha	1605	9783125798502	3125798507
Gabrielle-Suzanne Barbot de Villeneuve	La Belle et la Bête	1740	9781910880067	191088006X
Sir Isaac Newton	The Method of Fluxions and Infinite Series: With Its Application to the Geometry of Curve-lines	1763	9781330454862	1330454863
Mary Shelley	Frankenstein; or, The Modern Prometheus	1818	9781530278442	1530278449
Herman Melville	Moby-Dick; or, The Whale	1851	9781530697908	1530697905
Emma Dorothy Eliza Nevitte Southworth	The Hidden Hand	1888	9780813512969	0813512964
F. Scott Fitzgerald	The Great Gatsby	1925	9780743273565	0743273567
George Orwell	Nineteen Eighty-Four	1948	9780451524935	0451524934
Nnedi Okorafor	Who Fears Death	2010	9780756406691	0756406692

Table with equal-width columns and two `tbody` sections

Available analytical laboratory methods.
Chemical Group	Sampling Media	Instrument	Method	Detection Limit
Aldehydes and ketones	DNPH	HPLC/UV-VIS	SAE 930142HP	0.02 μg/mL
Elemental carbon/organic carbon	Quartz	EC/OC	Birch and Cary, 1996	0.2 μg C
Trace elements	Teflon	XRF	^*	^*
C₁-C₁₂	Tedlar Bag	GC-FID	SAE 930142HP	10 ppb C
C₁₀-C₃₀, POPs	Quartz	GC-MS	EPA TO-13A	1 ng
PM_2.5 mass	Teflon	Microbalance	Two weights within 3 μg	5 μg
Gas-phase NH₃, SO₄, and HNO₃	Fabric denuders	Spectrophotometer	Colorimetry	0.4 μg
^*substrates analyzed in contract laboratory.

Complex table

A complex table.
Invoice: 123456789			14 January 2025
Pay to: Acme Billing Co. 123 Main St. Cityville, NA 12345		Customer: John Smith 321 Willow Way Southeast Northwestershire, MA 54321
Name / Description	Qty.	@	Cost
Paperclips	1000	0.01	10.00
Staples (box)	100	1.00	100.00
Subtotal			110.00
Tax		8%	8.80
Grand Total			$118.80

N.B.: Given the poor state of support for tables in markdown, it should only be used for simple tables.

Figures

Here are examples of figure options. The available class modifiers:

fig-border: Add a border to the img
float-left: Float the figure left, 50% max width.
float-right: Float the figure right, 50% max width.
float-left-medium: Float the figure left, 33% max width.
float-right-medium: Float the figure right, 33% max width.
float-left-small: Float the figure left, 25% max width.
float-right-small: Float the figure right, 25% max width.

The width and positioning classes may be combined as in <figure class="fig-border float-left">.

Look! A cat — This image is only 200px wide. Images do not upscale.

This figure has class of float-left. Duis a egestas leo, quis suscipit leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ac dui a velit imperdiet malesuada. Sed at magna blandit, faucibus felis eget, varius lectus. Etiam lacus tellus, imperdiet at commodo eget, ornare quis turpis! Nam at est laoreet eros venenatis finibus ut sed est. Proin vulputate suscipit purus, eget efficitur nisl viverra a. Mauris orci nisl, facilisis vitae libero in, viverra pulvinar eros? Sed porttitor, dui ac aliquam pretium, dolor sapien gravida felis, eget mattis elit felis vitae ligula. Donec quis nibh porta, varius arcu eu, congue nibh.

The below figure has no class setting and defaults to 100% width (to a max of the image width).

Two cats sleeping in a chair. — Koshka and Picasso sleeping. Photo by Robert Bottomley

Example of `float-left` and `float-right` classes

Landscape cats — This is a landscape aspect ratio image. The figure is constrained to 50% width above 560px screen width. Photo by placecats.com

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.

Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?

Portrait cats — This is a portrait aspect ratio image. The figure is constrained to 50% width above 560px screen width. Photo by placecats.com

Integer malesuada vestibulum convallis. Sed eget massa non ex convallis auctor. Sed tellus dui, faucibus vitae auctor in, condimentum id tortor! Ut quis magna lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec cursus semper tortor a ultrices. Sed convallis lacus et urna interdum pharetra.

Proin laoreet rutrum ultricies. Vivamus arcu sem, egestas at augue quis, tincidunt blandit sem. Morbi aliquet aliquet euismod! Vivamus consectetur elementum pretium. Proin arcu lectus; tempor non justo id, consectetur blandit turpis. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non. Donec libero ipsum, elementum non nisl at, sollicitudin accumsan dui. Aliquam in augue molestie, luctus diam non, lacinia nulla. Nullam neque odio, aliquet ac magna laoreet, elementum ultrices erat? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit ullamcorper tempor.

Example of `float-left-medium` and `float-right-medium` classes

Example of `float-left-small` and `float-right-small` classes

Example of fig-border

Dodo — Fig. 1 The **dodo** (*Raphus cucullatus*), which was first discovered in Mauritus in the 1500s, has become an icon of extinction after it was wiped out by human action. Illustration by: someone

Donec cursus ipsum vitae urna lacinia, a lacinia libero hendrerit. Etiam a tortor sed sapien suscipit accumsan id a diam. Sed non auctor purus, eget fringilla mi. In at auctor tortor, eget fringilla dui! Morbi congue sagittis tellus, id pretium lectus sodales ultricies. Sed dignissim sapien sit amet varius cursus. Suspendisse nec placerat orci, sed aliquet ligula. Nulla laoreet, risus at bibendum tincidunt, diam odio vestibulum nisl, sit amet accumsan ipsum nibh quis urna. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non.