Change to calcite-card font size and font weight

[FWW]

Hello,

It looks like the recent update to ArcGIS hub as changed the font size and weight of the calcite-card (summary statistic), and I was wondering if there is a way to style it. I can see it is in a #shadow-root (open) but no specific part that I can use to change this new layout.

We prefer how it was displayed before as now it sticks out like a sore thumb on the page.

slot[name="title"]::slotted(*), ::slotted([slot="title"]) {

1. margin: 0px;
2. font-size: var(--calcite-font-size--2);
3. line-height: 1.375;
4. font-weight: var(--calcite-font-weight-medium);

Any help would be much appreciated.

Before

After update

[JayDev]

Hi @FWW, we've recently upgraded the Summary Statistic Card (you can read more about the update here). The Summary Statistic Card is now built using web components, which will allow these cards (and others that are built using web components) to be easily embeddable and re-usable outside of Hub. One tradeoff, however, is that web components cannot be styled using custom CSS and can only be styled using built-in settings. With this in mind, we designed the new card to be clear and legible across sites and devices. 

We are open to feedback about additional styling options that could be built-in to the system. Are there specific styling options that you would like to see?

[FWW]

Hi JayDev,

Thank you for your response. Ideally some way to expose the font size and weight, or have it as a customisable option in the settings of the card on ArcGIS hub. My colleague had to go through 150 pages and change the cards on each page which was incredibly time consuming for them.

Thank you.

[NicholasWright]

Please please please have your devs review HTML's ::part documentation. By adding the `part` attribute within your components we will be able to style them as needed.

https://developer.mozilla.org/en-US/docs/Web/CSS/::part

As an example, the textarea field was recently modified to include a `min-inline-size: 12rem;` styling, which is too big for where I was placing it.

Ideally you'd be putting `part`s on just about every element.

Your component:

<textarea ... part="textarea">

My CSS:

.esri-feature-form__input::part(textarea) { min-inline-size: auto; }

This works for me when mocking it up in dev tools, but without a part attribute to hook into, we're dead in the water on changing these stylings.

Thank you!

[TPB_COGGIS_Team]

 I also encountered this when I was about to demo a hub site to executive level staff. My stats are now wrapping the text which does not look good and I will ahve to realign the stats cards & spacers to try and a consistent look like I had previously. 

I donot have any suggestions reallly, just a comment about how my site's components no longer line up and look nice.

If these cards are going to be easily embeddable and reuseable outside of hub, thats great! Will we be able to use these stats cards in Story Maps? Right now we use one indicator dashboards and that isnt ideal. Looking forward to hearing more about this