I have been trying to figure out how to add a class to the <a> tags in an Unordered Link List, and so far I haven't been able to find a way except for creating a custom HTML element. I was hoping to find a Site Designer method of doing this without needing a custom HTML element.

For example, in the following code:

I would like to be able to change the list item links to have the following:


I can't seem to get access to the <a> tag itself in the list item link. And when trying to find a workaround using other components, it seems as though the unordered list and unordered link items do not allow me to have them act as containers for inserting a text item link, which would allow me to add a custom class to the link itself.

If this is not possible, I was wondering if anyone knows of a way to expand the Custom HTML Element code box, so that I can see a little more of what I am editing.

Thanks for any ideas. I have been using SD3 off and on, but usually just code in Visual Studio Code or JetBrains IDE with Emmet, which allows for a pretty fast coding experience. I like the idea of using SD3 to componentize a lot of the standard HTML, but would like to be able to do it in a Coffee Cup way.

Thanks,
Mike

Hi Mike,
could this work for you?
I added three things to the ul: a social icon, a link container and a button link (of which I removed the icon). TO all three I could add a class. This is the result:

<ul class="list-container mylist-class">
<li class="list-item-container myitem-class"><a href="#" target="_blank" class="social-image myref-class"><img class="generic-icon" src="./socialicons/webicon-zgeneric.png" alt="Social Icon"></a>
</li>
<li class="list-item-container myitem-class"><a href="" class="link-container mydiv-class"></a>
</li>
<li class="list-item-container myitem-class"><a href="#" class="link-button-glyph mybtn-class"><span class="link-button-text">description</span></a>
</li>
</ul>

René,

Thank you so much. I had been away from SD3 for a little bit, and I forgot all about the list and link CONTAINERS, which was exactly what I needed. I kept trying to use the UL Link component - which wasn't working.

I'm so happy you replied, I was about to start adding a ton of custom HTML elements, not remembering that those containers were available.

Thank you again!!!!