@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.0

package/generated/docs/components-text-docs.md

@@ -6,6 +6,14 @@ Overview
 
 The `IressText` component allows you to set typographic styles either on one element, or a block on HTML elements.
 
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
 The quick brown fox jumps over the lazy dog
 
 Hide code
@@ -18,6 +26,21 @@ Hide code
 
 Copy
 
+[](#props)Props
+---------------
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The content to be styled based on the design system typography tokens.
+
+ReactNode
+
+
+
+ | \- | \- |
+| Show Theme (Beta) itemsTheme (Beta) | Show Theme (Beta) items |
+
 [](#usage)Usage
 ---------------
 
@@ -47,17 +70,17 @@ This is a h2 element.
 
 ###### This is a h6 element.
 
-`This is a code element.`
+`This is a code element.`This is a small element.This is a cite element.This is a caption element.**This is a strong element.**_This is a em element._This is a a element.
 
 > This is a blockquote element.
 
-This is a caption element.This is a cite element.This is a small element.
+This is a pre element.
 
 Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-<IressStack gutter\="md"\>
+<IressStack gap\="spacing.100"\>
   <IressText element\="p"\>
     This is a p element.  </IressText\>
   <IressText element\="div"\>
@@ -78,132 +101,192 @@ Hide code
     This is a h6 element.  </IressText\>
   <IressText element\="code"\>
     This is a code element.  </IressText\>
-  <IressText element\="blockquote"\>
-    This is a blockquote element.  </IressText\>
-  <IressText element\="caption"\>
-    This is a caption element.  </IressText\>
-  <IressText element\="cite"\>
-    This is a cite element.  </IressText\>
   <IressText element\="small"\>
     This is a small element.  </IressText\>
+  <IressText element\="cite"\>
+    This is a cite element.  </IressText\>
+  <IressText element\="caption"\>
+    This is a caption element.  </IressText\>
+  <IressText element\="strong"\>
+    This is a strong element.  </IressText\>
+  <IressText element\="em"\>
+    This is a em element.  </IressText\>
+  <IressText element\="a"\>
+    This is a a element.  </IressText\>
+  <IressText element\="blockquote"\>
+    This is a blockquote element.  </IressText\>
+  <IressText element\="pre"\>
+    This is a pre element.  </IressText\>
 </IressStack\>
 
 Copy
 
-### [](#the-variant-prop)The `variant` prop
+### [](#the-textstyle-prop)The `textStyle` prop
 
-The `variant` prop allows you alter the default styling of the element that it selected.
+The `textStyle` prop (previously `variant`) allows you alter the default styling of the element that it selected.
 
 For example, in order to maintain the semantic structure of headings, you may need to style a `h2` element like a `h4`. Or you may want to style your heading using one of our display text formats.
 
-This is the blockquote variant.
-
-This is the body variant.
-
-This is the bold variant.
+This is the typography.heading.1 text style.
 
-This is the code variant.
+This is the typography.heading.2 text style.
 
-This is the display variant.
+This is the typography.heading.3 text style.
 
-This is the display1 variant.
+This is the typography.heading.4 text style.
 
-This is the display2 variant.
+This is the typography.heading.5 text style.
 
-This is the display3 variant.
+This is the typography.body.sm text style.
 
-This is the display4 variant.
+This is the typography.body.sm.regular text style.
 
-This is the h1 variant.
+This is the typography.body.sm.strong text style.
 
-This is the h2 variant.
+This is the typography.body.sm.em text style.
 
-This is the h3 variant.
+This is the typography.body.md.regular text style.
 
-This is the h4 variant.
+This is the typography.body.md text style.
 
-This is the h5 variant.
+This is the typography.body.md.strong text style.
 
-This is the h6 variant.
+This is the typography.body.md.em text style.
 
-This is the italic variant.
+This is the typography.body.lg text style.
 
-This is the lead variant.
+This is the typography.body.lg.regular text style.
 
-This is the small variant.
+This is the typography.body.lg.strong text style.
 
-This is the cite variant.
+This is the typography.body.lg.em text style.
 
-This is the caption variant.
+This is the typography.code text style.
 
 Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-<IressStack gutter\="md"\>
-  <IressText variant\="blockquote"\>
-    This is the blockquote variant.  </IressText\>
-  <IressText variant\="body"\>
-    This is the body variant.  </IressText\>
-  <IressText variant\="bold"\>
-    This is the bold variant.  </IressText\>
-  <IressText variant\="code"\>
-    This is the code variant.  </IressText\>
-  <IressText variant\="display"\>
-    This is the display variant.  </IressText\>
-  <IressText variant\="display1"\>
-    This is the display1 variant.  </IressText\>
-  <IressText variant\="display2"\>
-    This is the display2 variant.  </IressText\>
-  <IressText variant\="display3"\>
-    This is the display3 variant.  </IressText\>
-  <IressText variant\="display4"\>
-    This is the display4 variant.  </IressText\>
-  <IressText variant\="h1"\>
-    This is the h1 variant.  </IressText\>
-  <IressText variant\="h2"\>
-    This is the h2 variant.  </IressText\>
-  <IressText variant\="h3"\>
-    This is the h3 variant.  </IressText\>
-  <IressText variant\="h4"\>
-    This is the h4 variant.  </IressText\>
-  <IressText variant\="h5"\>
-    This is the h5 variant.  </IressText\>
-  <IressText variant\="h6"\>
-    This is the h6 variant.  </IressText\>
-  <IressText variant\="italic"\>
-    This is the italic variant.  </IressText\>
-  <IressText variant\="lead"\>
-    This is the lead variant.  </IressText\>
-  <IressText variant\="small"\>
-    This is the small variant.  </IressText\>
-  <IressText variant\="cite"\>
-    This is the cite variant.  </IressText\>
-  <IressText variant\="caption"\>
-    This is the caption variant.  </IressText\>
+<IressStack gap\="md"\>
+  <IressText textStyle\="typography.heading.1"\>
+    This is the typography.heading.1 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.2"\>
+    This is the typography.heading.2 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.3"\>
+    This is the typography.heading.3 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.4"\>
+    This is the typography.heading.4 text style.  </IressText\>
+  <IressText textStyle\="typography.heading.5"\>
+    This is the typography.heading.5 text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm"\>
+    This is the typography.body.sm text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.regular"\>
+    This is the typography.body.sm.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.strong"\>
+    This is the typography.body.sm.strong text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.em"\>
+    This is the typography.body.sm.em text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.regular"\>
+    This is the typography.body.md.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.md"\>
+    This is the typography.body.md text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.strong"\>
+    This is the typography.body.md.strong text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.em"\>
+    This is the typography.body.md.em text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg"\>
+    This is the typography.body.lg text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.regular"\>
+    This is the typography.body.lg.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.strong"\>
+    This is the typography.body.lg.strong text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.em"\>
+    This is the typography.body.lg.em text style.  </IressText\>
+  <IressText textStyle\="typography.code"\>
+    This is the typography.code text style.  </IressText\>
 </IressStack\>
 
 Copy
 
-### [](#the-mode-prop)The `mode` prop
+### [](#the-color-prop)The `color` prop
+
+The `color` prop (previously `mode`) can be used to set the colour of the text to these predefined mode colours: Body, Muted, Primary, Info, Success, Warning, Danger, Positive and Negative.
+
+This is colour.primary.fill mode.
+
+This is colour.primary.fillHover mode.
+
+This is colour.primary.onFill mode.
+
+This is colour.primary.surface mode.
+
+This is colour.primary.surfaceHover mode.
+
+This is colour.primary.text mode.
+
+This is colour.neutral.10 mode.
 
-The `mode` prop can be used to set the colour of the text to these predefined mode colours: Body, Muted, Primary, Info, Success, Warning, Danger, Positive and Negative.
+This is colour.neutral.20 mode.
 
-This is danger mode.
+This is colour.neutral.30 mode.
 
-This is info mode.
+This is colour.neutral.40 mode.
 
-This is muted mode.
+This is colour.neutral.50 mode.
 
-This is primary mode.
+This is colour.neutral.60 mode.
 
-This is success mode.
+This is colour.neutral.70 mode.
 
-This is warning mode.
+This is colour.neutral.80 mode.
 
-This is positive mode.
+This is colour.accent.brand mode.
 
-This is negative mode.
+This is colour.system.success.fill mode.
+
+This is colour.system.success.fillHover mode.
+
+This is colour.system.success.onFill mode.
+
+This is colour.system.success.surface mode.
+
+This is colour.system.success.surfaceHover mode.
+
+This is colour.system.success.text mode.
+
+This is colour.system.danger.fill mode.
+
+This is colour.system.danger.fillHover mode.
+
+This is colour.system.danger.onFill mode.
+
+This is colour.system.danger.surface mode.
+
+This is colour.system.danger.surfaceHover mode.
+
+This is colour.system.danger.text mode.
+
+This is colour.system.warning.fill mode.
+
+This is colour.system.warning.onFill mode.
+
+This is colour.system.warning.surface mode.
+
+This is colour.system.warning.text mode.
+
+This is colour.system.info.fill mode.
+
+This is colour.system.info.onFill mode.
+
+This is colour.system.info.surface mode.
+
+This is colour.system.info.text mode.
+
+This is colour.system.backdrop.fill mode.
+
+This is transparent mode.
+
+This is alt mode.
 
 Nested text mode demonstration:
 
@@ -213,24 +296,84 @@ Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-<IressStack gutter\="md"\>
-  <IressText mode\="danger"\>
-    This is danger mode.  </IressText\>
-  <IressText mode\="info"\>
-    This is info mode.  </IressText\>
-  <IressText mode\="muted"\>
-    This is muted mode.  </IressText\>
-  <IressText mode\="primary"\>
-    This is primary mode.  </IressText\>
-  <IressText mode\="success"\>
-    This is success mode.  </IressText\>
-  <IressText mode\="warning"\>
-    This is warning mode.  </IressText\>
-  <IressText mode\="positive"\>
-    This is positive mode.  </IressText\>
-  <IressText mode\="negative"\>
-    This is negative mode.  </IressText\>
-  <IressText mode\="danger"\>
+<IressStack gap\="md"\>
+  <IressText color\="colour.primary.fill"\>
+    This is colour.primary.fill mode.  </IressText\>
+  <IressText color\="colour.primary.fillHover"\>
+    This is colour.primary.fillHover mode.  </IressText\>
+  <IressText color\="colour.primary.onFill"\>
+    This is colour.primary.onFill mode.  </IressText\>
+  <IressText color\="colour.primary.surface"\>
+    This is colour.primary.surface mode.  </IressText\>
+  <IressText color\="colour.primary.surfaceHover"\>
+    This is colour.primary.surfaceHover mode.  </IressText\>
+  <IressText color\="colour.primary.text"\>
+    This is colour.primary.text mode.  </IressText\>
+  <IressText color\="colour.neutral.10"\>
+    This is colour.neutral.10 mode.  </IressText\>
+  <IressText color\="colour.neutral.20"\>
+    This is colour.neutral.20 mode.  </IressText\>
+  <IressText color\="colour.neutral.30"\>
+    This is colour.neutral.30 mode.  </IressText\>
+  <IressText color\="colour.neutral.40"\>
+    This is colour.neutral.40 mode.  </IressText\>
+  <IressText color\="colour.neutral.50"\>
+    This is colour.neutral.50 mode.  </IressText\>
+  <IressText color\="colour.neutral.60"\>
+    This is colour.neutral.60 mode.  </IressText\>
+  <IressText color\="colour.neutral.70"\>
+    This is colour.neutral.70 mode.  </IressText\>
+  <IressText color\="colour.neutral.80"\>
+    This is colour.neutral.80 mode.  </IressText\>
+  <IressText color\="colour.accent.brand"\>
+    This is colour.accent.brand mode.  </IressText\>
+  <IressText color\="colour.system.success.fill"\>
+    This is colour.system.success.fill mode.  </IressText\>
+  <IressText color\="colour.system.success.fillHover"\>
+    This is colour.system.success.fillHover mode.  </IressText\>
+  <IressText color\="colour.system.success.onFill"\>
+    This is colour.system.success.onFill mode.  </IressText\>
+  <IressText color\="colour.system.success.surface"\>
+    This is colour.system.success.surface mode.  </IressText\>
+  <IressText color\="colour.system.success.surfaceHover"\>
+    This is colour.system.success.surfaceHover mode.  </IressText\>
+  <IressText color\="colour.system.success.text"\>
+    This is colour.system.success.text mode.  </IressText\>
+  <IressText color\="colour.system.danger.fill"\>
+    This is colour.system.danger.fill mode.  </IressText\>
+  <IressText color\="colour.system.danger.fillHover"\>
+    This is colour.system.danger.fillHover mode.  </IressText\>
+  <IressText color\="colour.system.danger.onFill"\>
+    This is colour.system.danger.onFill mode.  </IressText\>
+  <IressText color\="colour.system.danger.surface"\>
+    This is colour.system.danger.surface mode.  </IressText\>
+  <IressText color\="colour.system.danger.surfaceHover"\>
+    This is colour.system.danger.surfaceHover mode.  </IressText\>
+  <IressText color\="colour.system.danger.text"\>
+    This is colour.system.danger.text mode.  </IressText\>
+  <IressText color\="colour.system.warning.fill"\>
+    This is colour.system.warning.fill mode.  </IressText\>
+  <IressText color\="colour.system.warning.onFill"\>
+    This is colour.system.warning.onFill mode.  </IressText\>
+  <IressText color\="colour.system.warning.surface"\>
+    This is colour.system.warning.surface mode.  </IressText\>
+  <IressText color\="colour.system.warning.text"\>
+    This is colour.system.warning.text mode.  </IressText\>
+  <IressText color\="colour.system.info.fill"\>
+    This is colour.system.info.fill mode.  </IressText\>
+  <IressText color\="colour.system.info.onFill"\>
+    This is colour.system.info.onFill mode.  </IressText\>
+  <IressText color\="colour.system.info.surface"\>
+    This is colour.system.info.surface mode.  </IressText\>
+  <IressText color\="colour.system.info.text"\>
+    This is colour.system.info.text mode.  </IressText\>
+  <IressText color\="colour.system.backdrop.fill"\>
+    This is colour.system.backdrop.fill mode.  </IressText\>
+  <IressText color\="transparent"\>
+    This is transparent mode.  </IressText\>
+  <IressText color\="alt"\>
+    This is alt mode.  </IressText\>
+  <IressText color\="colour.primary.text"\>
     Nested text mode demonstration:{' '}
     <IressText\>
       I am nested, and return to the original colour    </IressText\>
@@ -239,9 +382,9 @@ Hide code
 
 Copy
 
-### [](#the-align-prop)The `align` prop
+### [](#the-textalign-prop)The `textAlign` prop
 
-The `align` prop can be used to set the text's alignment.
+The `textAlign` prop (previously `align`) can be used to set the text's alignment.
 
 The quick brown fox jumps over the lazy dog
 
@@ -257,16 +400,16 @@ Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-<IressStack gutter\="md"\>
-  <IressText align\="inherit"\>
+<IressStack gap\="md"\>
+  <IressText textAlign\="left"\>
     The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="left"\>
+  <IressText textAlign\="center"\>
     The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="center"\>
+  <IressText textAlign\="right"\>
     The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="right"\>
+  <IressText textAlign\="justify"\>
     The quick brown fox jumps over the lazy dog  </IressText\>
-  <IressText align\="justify"\>
+  <IressText textAlign\="inherit"\>
     The quick brown fox jumps over the lazy dog  </IressText\>
 </IressStack\>
 
@@ -344,38 +487,86 @@ Copy
 
 If you just need to style a block of typography content, you can just wrap the entire block of HTML with the text component.
 
-Heading text
-------------
+History
+-------
 
-This is just raw HTML inside the text component. This is just raw HTML inside the text component.
+### Founding and Early Years (1993 - 2000)
 
-> Nisi optio dolore debitis porro ex quis odio atque, ut obcaecati dolorem enim molestiae eum voluptatem excepturi quisquam. Someone in latin
+[Iress Limited (ASX: IRE)](https://iress.com) was founded in 1993 in Melbourne, Australia, as a provider of financial market data and trading software. Initially, the company focused on delivering technology solutions for stockbrokers and traders, providing real-time market data, order management, and trading execution tools.
 
-You can also use dividers inside blocks to separate content.
+### Expansion and IPO (2001 - 2010)
 
-* * *
+In 2001, Iress went public, listing on the Australian Securities Exchange (ASX). This move provided the company with capital to expand its operations and invest in new technologies. During this period, Iress expanded its services beyond trading platforms to include financial planning software, portfolio management, and wealth management solutions. The company also started expanding internationally, entering markets such as the UK, Canada, New Zealand, and South Africa, through organic growth and acquisitions.
+
+### Global Growth and Acquisitions (2011 - 2020)
+
+Between 2011 and 2020, Iress continued its global expansion through acquisitions and product diversification. Key acquisitions included:
+
+*   Avelo (2013): Strengthened its presence in the UK financial services market.
+*   Pulse Software (2014): Added financial advice solutions to its portfolio.
+*   INET BFA (2016): Expanded its reach into South Africa’s financial market.
+*   OneVue (2020): Enhanced its superannuation and investment administration capabilities.
 
-Just like the one above.
+During this period, Iress also expanded into mortgage lending technology and digital financial services, adapting to the increasing demand for automation and efficiency in financial markets.
+
+### Recent Developments (2021 - Present)
+
+In 2021, Iress announced a strategic review of its business, focusing on streamlining operations and improving profitability. The company also experienced leadership changes, including new CEO appointments to drive digital transformation.
+
+Iress has continued to innovate with cloud-based solutions, artificial intelligence (AI), and data analytics, catering to financial institutions, brokers, and wealth management firms globally.
+
+Some code in here
 
 Hide code
 
 \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
 
-<IressText\>
+<IressText
+  maxWidth\="container.md"
+  mx\="auto"
+  px\="spacing.200"
+\>
   <h2\>
-    Heading text  </h2\>
+    History  </h2\>
+  <h3\>
+    Founding and Early Years (1993 - 2000)  </h3\>
+  <p\>
+    <a
+      href\="https://iress.com"
+      target\="\_blank"
+    \>
+      Iress Limited (ASX: IRE)    </a\>
+    {' '}was founded in 1993 in Melbourne, Australia, as a provider of financial market data and trading software. Initially, the company focused on delivering technology solutions for stockbrokers and traders, providing real-time market data, order management, and trading execution tools.
+  </p\>
+  <h3\>
+    Expansion and IPO (2001 - 2010)  </h3\>
+  <p\>
+    In 2001, Iress went public, listing on the Australian Securities Exchange (ASX). This move provided the company with capital to expand its operations and invest in new technologies. During this period, Iress expanded its services beyond trading platforms to include financial planning software, portfolio management, and wealth management solutions. The company also started expanding internationally, entering markets such as the UK, Canada, New Zealand, and South Africa, through organic growth and acquisitions.  </p\>
+  <h3\>
+    Global Growth and Acquisitions (2011 - 2020)  </h3\>
+  <p\>
+    Between 2011 and 2020, Iress continued its global expansion through acquisitions and product diversification. Key acquisitions included:  </p\>
+  <ul\>
+    <li\>
+      Avelo (2013): Strengthened its presence in the UK financial services market.    </li\>
+    <li\>
+      Pulse Software (2014): Added financial advice solutions to its portfolio.    </li\>
+    <li\>
+      INET BFA (2016): Expanded its reach into South Africa’s financial market.    </li\>
+    <li\>
+      OneVue (2020): Enhanced its superannuation and investment administration capabilities.    </li\>
+  </ul\>
   <p\>
-    This is just raw HTML inside the text component. This is just raw HTML inside the text component.  </p\>
-  <blockquote\>
-    Nisi optio dolore debitis porro ex quis odio atque, ut obcaecati dolorem enim molestiae eum voluptatem excepturi quisquam.{' '}
-    <cite\>
-      Someone in latin    </cite\>
-  </blockquote\>
+    During this period, Iress also expanded into mortgage lending technology and digital financial services, adapting to the increasing demand for automation and efficiency in financial markets.  </p\>
+  <h3\>
+    Recent Developments (2021 - Present)  </h3\>
   <p\>
-    You can also use dividers inside blocks to separate content.  </p\>
-  <hr />
+    In 2021, Iress announced a strategic review of its business, focusing on streamlining operations and improving profitability. The company also experienced leadership changes, including new CEO appointments to drive digital transformation.{' '}
+  </p\>
   <p\>
-    Just like the one above.  </p\>
+    Iress has continued to innovate with cloud-based solutions, artificial intelligence (AI), and data analytics, catering to financial institutions, brokers, and wealth management firms globally.  </p\>
+  <pre\>
+    Some code in here  </pre\>
 </IressText\>
 
 Copy
@@ -386,9 +577,9 @@ On this page
 *   [Props](#props)
 *   [Usage](#usage)
     *   [The element prop](#the-element-prop)
-    *   [The variant prop](#the-variant-prop)
-    *   [The mode prop](#the-mode-prop)
-    *   [The align prop](#the-align-prop)
+    *   [The textStyle prop](#the-textstyle-prop)
+    *   [The color prop](#the-color-prop)
+    *   [The textAlign prop](#the-textalign-prop)
 *   [Behaviour](#behaviour)
     *   [Headings with icons](#headings-with-icons)
     *   [Block of typographic content](#block-of-typographic-content)