Table of contents
Table of contents
Component demo
Interactive example
Latte
A coffee drink made with a shot or two of espresso, a larger portion of steamed milk, and a thin layer of milk foam on top.
Cappuccino
A coffee drink traditionally made from an espresso base, hot steamed milk, and a thick layer of milk foam.
Espresso
A concentrated coffee beverage produced by forcing hot, high-pressure water through finely ground coffee beans.
<ic-table-of-contentsposition="right"><divid="content"style="width:80%;"><divstyle="height:200px;background:gray"><h2>Latte</h2><p>A coffee drink made with a shot or two of espresso, a larger portion of steamed milk, and a thin layer of milk foam on top.</p></div><divstyle="height:200px;background:darkgray"><h2>Cappuccino</h2><p>A coffee drink traditionally made from an espresso base, hot steamed milk, and a thick layer of milk foam.</p></div><divstyle="height:200px;background:gray"><h2>Espresso</h2><p>A concentrated coffee beverage produced by forcing hot, high-pressure water through finely ground coffee beans.</p></div></div></ic-table-of-contents>Table of contents details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
|
|---|---|---|
|
|
Heading text of the table of contents. |
|
|
|
Maximum heading level of child content that will generate an item in the table of contents. E.g. when set to '3', headings of <h4> and <h5> will not appear. |
|
|
|
If |
|
|
|
Whether the table of contents will appear on the right of or above child content on large viewport widths. |
|
|
|
Vertical offset to page scroll (in percent) when table of contents item is selected, to account for other page components like headers. |
|
|
|
The size of the table of contents items. |
|
|
|
Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. |
|
|
|
If |
|
|
Heading text of the table of contents. |
|
Maximum heading level of child content that will generate an item in the table of contents. E.g. when set to '3', headings of <h4> and <h5> will not appear. |
|
If |
|
Whether the table of contents will appear on the right of or above child content on large viewport widths. |
|
Vertical offset to page scroll (in percent) when table of contents item is selected, to account for other page components like headers. |
|
The size of the table of contents items. |
|
Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. |
|
If |
Variants
Heading
Interactive example
Flat White
A velvety coffee made with a shot of espresso and steamed milk, featuring a thin layer of microfoam for a smooth texture.
Mocha
A rich blend of espresso, steamed milk, and chocolate, often topped with whipped cream or cocoa powder.
Affogato
A dessert-style coffee where a shot of hot espresso is poured over a scoop of vanilla ice cream.
<ic-table-of-contentsheading="Coffee table"position="right"><divid="content"style="width:80%;"><divstyle="height:200px;background:gray"><h2>Flat White</h2><p>A velvety coffee made with a shot of espresso and steamed milk, featuring a thin layer of microfoam for a smooth texture.</p></div><divstyle="height:200px;background:darkgray"><h2>Mocha</h2><p>A rich blend of espresso, steamed milk, and chocolate, often topped with whipped cream or cocoa powder.</p></div><divstyle="height:200px;background:gray"><h2>Affogato</h2><p>A dessert-style coffee where a shot of hot espresso is poured over a scoop of vanilla ice cream.</p></div></div></ic-table-of-contents>Small
Interactive example
Cortado
A balanced coffee drink made with equal parts espresso and warm milk, resulting in a smooth, mellow flavor.
Ristretto
A short shot of espresso made with less water, producing a more intense and concentrated flavor profile.
Irish Coffee
A warming beverage combining hot coffee, Irish whiskey, sugar, and a layer of cream on top.
<ic-table-of-contentsheading="Coffee table"size="small"position="right"><divid="content"style="width:80%;"><divstyle="height:200px;background:gray"><h2>Cortado</h2><p>A balanced coffee drink made with equal parts espresso and warm milk, resulting in a smooth, mellow flavor.</p></div><divstyle="height:200px;background:darkgray"><h2>Ristretto</h2><p>A short shot of espresso made with less water, producing a more intense and concentrated flavor profile.</p></div><divstyle="height:200px;background:gray"><h2>Irish Coffee</h2><p>A warming beverage combining hot coffee, Irish whiskey, sugar, and a layer of cream on top.</p></div></div></ic-table-of-contents>Large
Interactive example
Macchiato
An espresso "stained" with a small amount of milk or foam, offering a bold coffee flavor with a hint of creaminess.
Café au Lait
A French classic made with equal parts brewed coffee and steamed milk, resulting in a smooth and mild beverage.
Doppio
A double shot of espresso, providing a strong and robust coffee experience for those who love intensity.
<ic-table-of-contentsheading="Coffee table"size="large"position="right"><divid="content"style="width:80%;"><divstyle="height:200px;background:gray"><h2>Macchiato</h2><p>An espresso "stained" with a small amount of milk or foam, offering a bold coffee flavor with a hint of creaminess.</p></div><divstyle="height:200px;background:darkgray"><h2>Café au Lait</h2><p>A French classic made with equal parts brewed coffee and steamed milk, resulting in a smooth and mild beverage.</p></div><divstyle="height:200px;background:gray"><h2>Doppio</h2><p>A double shot of espresso, providing a strong and robust coffee experience for those who love intensity.</p></div></div></ic-table-of-contents>Maximum heading level
Interactive example
Coffee
Americano
With milk
A coffee drink made by diluting a shot of espresso with hot water, resulting in a larger, less intense drink than a straight espresso.
With oat milk
A vegan alternative.
Iced coffee
Tea
Green Tea
Matcha
A finely ground powder made from specially grown and processed green tea leaves (tencha), known for its vibrant emerald color, umami flavor, and higher nutritional content than steeped tea.
Black Tea
A type of tea made from the Camellia sinensis plant that undergoes full oxidation, a process that turns the leaves dark brown, gives the tea its characteristic bold and brisk flavor, and results in a dark-colored infusion.
<ic-table-of-contentsheading="Drinks table"maximumHeadingLevel="4"position="right"><divid="content"style="width:80%;"><divstyle="height:300px;background:gray"><h2>Coffee</h2><h3>Americano</h3><h4>With milk</h4><p> A coffee drink made by diluting a shot of espresso with hot water, resulting in a larger, less intense drink than a straight espresso.</p><h4>With oat milk</h4><p>A vegan alternative.</p><h3>Iced coffee</h3></div><divstyle="height:300px;background:darkgray"><h2>Tea</h2><h3>Green Tea</h3><h4>Matcha</h4><p> A finely ground powder made from specially grown and processed green tea leaves (tencha), known for its vibrant emerald color, umami flavor, and higher nutritional content than steeped tea.</p><h3>Black Tea</h3><p> A type of tea made from the Camellia sinensis plant that undergoes full oxidation, a process that turns the leaves dark brown, gives the tea its characteristic bold and brisk flavor, and results in a dark-colored infusion.</p></div></div></ic-table-of-contents>Monochrome
Interactive example
Coffee selection
Our finest selection of coffees with a different variety of milks catering to all requirements.
Tea selection
Our finest selection of teas with a different variety of milks catering to all requirements.
Other drinks
We also have a selection of soft drinks.
<ic-table-of-contentsmonochrome="true"position="right"><divid="content"style="width:80%;"><divstyle="height:200px;background:gray"><h2>Coffee selection</h2><p>Our finest selection of coffees with a different variety of milks catering to all requirements.</p></div><divstyle="height:200px;background:darkgray"><h2>Tea selection</h2><p>Our finest selection of teas with a different variety of milks catering to all requirements.</p></div><divstyle="height:200px;background:gray"><h2>Other drinks</h2><p>We also have a selection of soft drinks.</p></div></div></ic-table-of-contents>