Latest Contributions by KlaraSchmitt

Assuming you have the data in your catalog, you should be able to follow these steps https://doc.arcgis.com/en/hub/sites/insert-charts-tables-and-key-metrics.htm#ESRI_SECTION1_E1D799DC433941CA9A3669F4322880D3 to connect your data to the statistics summary card. ... View more

Those are not flip cards. Those are non-dynamic KPI cards from this post: https://community.esri.com/t5/arcgis-hub-documents/tips-create-custom-cards-with-html/ta-p/920496  Flip cards are actually rather challenging to get right from a keyboard accessibility and focus management standpoint (we've tried), so it's unlikely you'd seen those in our editor. As for having a dynamically backed statistic card, we currently support this today with the statistic card in the layout editor. We are, however, working on some improvements to that card, which will give it a little appearance boost, amongst other requested features. You can expect to see these changes during Q3 this year. ... View more

Hello @Ed_, Unfortunately, you would need to do something fairly complex to make seven images look good in a 12-column grid and you would likely need to have a sound understanding of css-grid, flex-box and/or media queries. I don't have much experience with css-grid and while I did try a quick implementation of your premise using flexbox on my own site, it did not look good when content was forced to wrap on smaller devices. Flexbox doesn't do wrapping automatically and I think even if I did provide you with baseline code, you wouldn't like the output. As you've stated that you aren't familiar with editing HTML, I think you would find it difficult to modify and I think you will have a better look if you use spacers. You may also try searching this forum for people who've done similar grid implementations and see if there's anything you want to try out. ... View more

@Ed_  Yes, I understand it's not ideal. However, until we redo our grid structure, which is a large-scale effort that is in fact on our radar, we're limited in how we can handle card resizing and the total columns used by cards in a row must equal 12. And yes, if you do not wish to write HTML to achieve your desired affect in a single 12-column Text Card, I would advise the use of more spacers. ... View more

Hello @Ed_, You are likely running into issues because you have 7 images and Hub uses a 12-column grid system to define our rows. At the moment you have 5 image cards that are each 2-columns wide (utilizing 10 columns) and that leaves you with only 2 spare columns of space, so each one of your remaining image cards can only be 1-column wide. You may want to consider stacking your images in two rows and adding spacers on either side. ... View more

Hi Mark, Are you using this version of Calcite: https://developers.arcgis.com/calcite-design-system/components/card/ for your cards? Because I see some classes in your code (column-22 pre-1) that make me think you might be looking at the older calcite web framework. Hub is not built using that framework, we're still using Bootstrap 3 for our grid system (which is what generates that first div with the col-* classes you list), but we're beginning to incorporate the calcite components from the calcite design system linked above and you can use those same components in the Text Card in the HTML editor. However, you may see some differences as the components rely on slots to manage their configurations. Edit: I'd add that the other classes you mention: three-card contrast-safe-text are formatting that Hub uses to style the calcite card component if you are using the plus icon in the Text Card to inject these. The CSS related to these classes is primarily used for formatting the thumbnail, but there is a little bit related to font-sizes. In regards to you question about a halo effect, unfortunately, it is not possible at this time to add a drop-shadow to the calcite card itself because these components are web components. You might be able to wrap the card in a div and apply a box shadow to the div by a unique CSS class. You can use a box-shadow generator: https://www.cssmatic.com/box-shadow to generate your glow styles. You want horizontal and vertical length to be near 0 and blur to be 10-20. ... View more

Hello Kreed, You can set a unique row class by clicking the edit pencil icon on the row card and then at the bottom of the Appearance accordion, find the Row CSS Class and give it a unique name that won't interfere with the app stylesheets. Row CSS Class field highlighted Then in your text card you can add embedded style tags that allow you to apply CSS to your cards using the row class as your first selector.  <style> .my-custom-row-class .calcite-web { ... } </style> However, as I noted above, using a min-height doesn't really account for responsive resizing if your cards differ in amount of content, so you may need additional CSS such as media queries or flex-box (and if you're using flex-box, you want to take the Bootstrap col-* classes out of your code.) ... View more

Hello @RandyMcGregor3, I understand the confusion and I apologize. Because the Gallery Cards always have a white background and we are trying to automatically handle accessibility contrast requirements for light link colors, we are running a function that darkens the color threshold based on its luminance. It is not perfect, but we are trying to account for a majority of use cases. It presently does result in gray for medium-level link colors that would fail contrast on a while background. Currently, the outline button on Gallery Cards uses a transparent background, but perhaps we can look at other options once the calcite upgrade has been integrated with our app. In the meantime, using the solid button would give you color and also ensure that the button passes color contrast requirements. ... View more

Hello @BradCarone,  I am sorry for the delay. I have not forgotten about you, but I wanted to make sure I gave you accurate guidance. If you're using Calcite buttons <calcite-button> with an href, you can use appearance="solid" to get a solid button using link-color or appearance="transparent" to get a transparent button using link-color. I might ask you to hold off on using appearance="outline". We are currently in the process of implementing an upgrade that will change how that particular style behaves and it should be finalized by the end of March. An example of this would be: <calcite-button href="#" appearance="solid">Button Text</calcite-button> If you need an outline button, I would suggest using Bootstrap for now (please see my update above for expected changes.) When using Bootstrap 3 classes on a link or a dropdown, you can use .btn-primary to get a solid button, .btn-default to get an outline button, or .btn-link to get a transparent button. An example of this would be: <a href="#" class="btn btn-primary">Button Text</a> ... View more

Update We appreciated the community feedback on this change related to how theme is applied to buttons. Based on that feedback, we plan to replace the transparent background on the Bootstrap outline buttons using the .btn-default class with the site-background color (as they were before). This new change was carefully considered and will streamline conversion to calcite outline-fill buttons in the future. We expect it to be included in our next release. ... View more

Do you have any custom CSS on your page in Text Cards or in your header that affects buttons or perhaps uses a !important? That looks like the result of custom CSS being applied to generic selectors without enough specificity. ... View more