Changing Style of Collapsible Calcite Blocks

TheGamer

Is there a way to make the calcite headings (heading1, heading2) have a background color or make them bold? so its easier to distinguish compared to the other calcite blocks?

 

 

<script
      src="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.esm.js"
      type="module"
></script>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.css"
    />
<calcite-shell>
  <calcite-shell-panel slot="panel-start" position="start" resizable="false">
     <calcite-panel heading="Widget">
        <calcite-block collapsible heading="Heading 1" open>
             <calcite-block collapsible heading="Heading Subsection 1" closed>
             </calcite block>
             <calcite-block collapsible heading="Heading Subsection 2" closed>
             </calcite block>
        </calcite-block>
        <calcite-block collapsible heading="Heading 2" open>
         <!--contains calcite blocks for heading 2*/-->
        </calcite-block>

     </calcite-panel>
  </calcite-shell-panel>
</calcite shell>
    

 

@KittyHurley @BenElan @omar-marji 

 

KittyHurley

Great question, @TheGamer, thanks for reaching out! We received a similar ask late last year regarding the heading in Accordion Item.

 

We're still working through prioritization of the enhancement to expose a CSS variable, in the case of Accordion Item, but we should be able to determine a pattern across components, which includes Block, since the heading is within the Shadow DOM.

 

Added context to the enhancement request to consider, and/or support Block for consideration. You can add in additional context, or follow along the issues progress on GitHub.