Formatting text inside of an accordion

Hi everyone! I was wondering if there's a way to change the formatting of text inside an accordion. I'm able to easily change the font size, font family, etc. in an accordion, but can I change different parts of the accordion inside? For example, is it possible to have a paragraph of text, then another paragraph of text set inside a colored box? Can I center one part of the accordion's text and left align another part? Thanks!

22 hours ago, hannahwirth said:

Hi everyone! I was wondering if there's a way to change the formatting of text inside an accordion. I'm able to easily change the font size, font family, etc. in an accordion, but can I change different parts of the accordion inside? For example, is it possible to have a paragraph of text, then another paragraph of text set inside a colored box? Can I center one part of the accordion's text and left align another part? Thanks!

Can you share your URL so I can check it?

@hannahwirth this is a great question! We don't have a lot of HTML formatting available inside the accordion block, but we do have some options if we get creative with text styles 😉 If you make some text bold or italic, we can isolate that text type using CSS.

Here is an example of a code that customize the bold text inside an accordion description, giving it a different color background. I also added a little padding so the text wasn't flush with the edge of the new background - check out the image to see the example code in action!

I hope this helps with your project. Feel free to reach out if you have any other questions. I also have a few accordion block style tutorials you might like; I even created a code to add images inside accordions 🙌 https://insidethesquare.co/squarespace-tutorials/tag/accordion

.accordion-item__description strong{
font-weight:normal!important;
padding:.25rem;
background:#fff;
}