Latest Contributions by KlaraSchmitt

Ah. Yes. Our image card is an actual image object, whereas the row uses a background image so it's more of a container, which makes it easier to place text within the container. Your best bet at the moment would be to embed text into the image using a photo editor. I like https://pixlr.com/editor/, but I'm told Canva is also very easy to use: https://www.canva.com/photo-editor/.  ... View more

Is this suitable to what you are trying to do? https://community.esri.com/t5/arcgis-hub-documents/tips-adding-an-opaque-content-block/ta-p/920452 ... View more

Hi @ThomasGoodridge, It might be that your browser is caching the layout. You could try clearing the cache for your browser or opening the published site a private browsing window to see if the problem persists. ... View more

Hi @BradCarone, Unfortunately, we do anticipate the link being tied to the title for the foreseeable future. Me and the developers spent a lot of time considering all the different patterns available and this was the best work-around. (And we tried a lot of things.) We cannot have an empty link on the thumbnail as we've had multiple customers log that as an accessibility bug. We'd need support for storing custom alt text with thumbnails and I believe that would be a change to the ArcGIS Online item structure. ... View more

I'm going to summarize my earlier response, just so folks have context, in case anyone else runs into this problem and then I'll elaborate on how to get your image and text to line up vertically. -- In our earlier conversation, we talked about how to simplify your code to find out what CSS element was causing the text to cut off and I recommended removing all the positioning attributes, as doing anything with top, bottom, left, right and absolute or fixed positioning is risky when you're a beginner and don't fully understand what the code is doing. I also recommended opening up Chrome Dev tools via right-click on an element > Inspect and then turning on and off the checkboxes. I also suggested wrapping any CSS you embed via <style> tags in a unique classname that could be set in Row Settings under CSS Class, so as to be less likely to interfere with the CSS classnames Hub uses to make our software. For a more detailed reply with pictures on how to do that, see my response here: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically/m-p/1292528/highlight/true#M5678  Right click website element, select inspect from dropdown menu, and then within CSS properties start turning off attributes until the problem is identified -- Moving on - the reason that your elements do not automatically line up vertically is because reflow is not automatic with custom HTML and CSS. The Layout Editor uses Bootstrap 3, which you can read a little bit more about it on the post I've linked above, but essentially because you are lining up multiple elements inside a Text Card rather than using individual cards, you will need to duplicate the grid inside the Text Card. You can wrap your image and text-container elements in <div> elements and apply Bootstrap 3 classes to them to indicate breakpoints, like this: <div class="col-xs-12 col-sm-4"> <div class="image-container"></div> </div> <div class="col-xs-12 col-sm-4"> <div class="text-container"></div> </div> Your other alternative is to write media queries that would remove the width calculations at a specific device sizes: https://web.dev/learn/design/media-queries#adjust_styles_based_on_viewport_size @media (max-width: 560px) {  .image-container { width: 100%; } .text-container { width: 100%; } } ^ This indicates that for screen sizes no bigger than 560px, overwrite previous CSS rules. Media queries written like this should be placed below the rest of your CSS, so that the "cascade" applies correctly. (I also can't promise the code above will work - I'm writing it off the top of my head so you get an idea of how overwrites work for media queries, but it may require tweaking.) ... View more

@DarrenLloyd__DOIT  Are you familiar with our Accessibility resource page? It links to a number of blog posts about accessibility and our products: https://www.esri.com/en-us/accessibility/resources Or if you're looking for more documentation on what is possible within the Calcite Design System, this is the documentation for that: https://developers.arcgis.com/calcite-design-system/components/  ... View more

Hello, The calcite-accordion-item is part of Esri's Calcite Design system, which is designed to be highly configurable, so that any Esri application can use it. As you note, the heading role and level HTML attributes are already supported by calcite-accordion-item, but because the component is intended to be flexible, it is not always presumed that accordion headers will be headings. (For instance, Hub uses accordions on our search filters and we were told during an accessibility audit that those should not be headings and we have subsequently updated.) I understand it may be a nuisance to have to apply the HTML attributes individually to each of your accordions within your Hub Site or Hub Page, but even if we added the role="heading" to the default accordion item, levels would still have to be set individually, since we cannot know where in the site/page heading hierarchy a customer has placed their accordions. So at the moment, the calcite-accordion-item in Hub uses the default configuration set by the design system. But it sounds like you have a solution that works for you, even if it requires a tad bit more configuration than you'd like.   ... View more

@GeneH_Chesco  You can add fonts to the Hub site theme by going to the site editor, then selecting theme, and then scrolling down past the list of colors where we have two fields for setting base font and heading font. Select the gear icon and this will launch a model where you can add your Google fonts.   ... View more