calcite accordion heading scale "l" (large) is too small

[croush2024]

I would like to use an accordion list for a FAQ page on a Hub site we are developing.

When I use calcite-accordion, scale above "l" (large) are ignored. The size of text with "l" is too small. We probably need "2xl" for our purposes. "xl" and "2xl" are documented but do not work. Does anyone have experience with this or know of Esri's stance on this?

Here is sample html which I am using in a text card in ArcGIS Hub:

<calcite-accordion icon-position="start" icon-type="caret" scale="m">
<calcite-accordion-item heading="Here is a heading, scale m" style="--calcite-accordion-item-text:blue">
<div style="padding-left:5%">
<p>Here is some text.</p> </div> </calcite-accordion-item>

<calcite-accordion icon-position="start" icon-type="caret" scale="l">
<calcite-accordion-item heading="Here is a heading, scale l" style="--calcite-accordion-item-text:blue">
<div style="padding-left:5%">
<p>Here is some text.</p> </div> </calcite-accordion-item>

<calcite-accordion icon-position="start" icon-type="caret" scale="xl">
<calcite-accordion-item heading="Here is a heading, scale xl" style="--calcite-accordion-item-text:blue">
<div style="padding-left:5%">
<p>Here is some text.</p> </div> </calcite-accordion-item>

<calcite-accordion icon-position="start" icon-type="caret" scale="2xl">
<calcite-accordion-item heading="Here is a heading, scale 2xl" style="--calcite-accordion-item-text:blue">
<div style="padding-left:5%">
<p>Here is some text.</p> </div> </calcite-accordion-item>

</calcite-accordion>

Additionally, I read that the details tag is not supported, but it seems to work except for the names feature. However, I'm hesitant to use it. I wonder if it will be unpredictable if not supported.

[JustinPrather]

Hi @croush2024 –

Calcite scales are only in `s`, `m`, and `l`. There is not a way to adjust the heading size of accordion items outside of using these three scales. You can adjust the size of the expanded content within the accordion items. 

[croush2024]

Thank you, Justin. Can I define the size of s, m, l? Such as to "1.4rem"? It seems odd to restrict to such small sizes. HTML in general is very customizable. We will not be able to use accordion if the text size is not adjustable. It doesn't fit the format of our site.

[croush2024]

I have more questions:

1. Why are sizes limited to s, m, l? Why not xl and 2xl?

2. Why is "large" the equivalent of a default paragraph font? My middle eyes would like larger options for headings. Perhaps these were designed for map popups and my use on a full FAQ page is misguided.

3. I cannot find any reference to customizing the sizes of s, m, l. Can this be done? It would be a very html/css thing to do.

4. Should I mark this as solved since my original question is technically answered? 

A couple of other notes:

- calcite-accordion documentation doesn't say what options are available for scale, only that m is default

- as we designed our Hub site we also ran into the scale problem with calcite icons. We ended up using Flaticon icons because calcite icon size "large" was too small