0

Prompt please both in the field {{ block.markdownContent|markdown|raw }} replace and add classes?

For example:

<p> replace by: <p class="section__paragraph text">
<h2> replace by:      <h2 class="section__title title">
<ul> replace by:      <ul class="attention">
<li> replace by:      <li class="attention__item"> and add within the tag <li class="attention__item"> тег <p class="attention__text">

Provided that the listed list of <ol> is to be replaced:
<ol> replace by:     <ul class="remark list">
<li> replace by:     <li class="remark__item item">
add:
<p class="remark__text"><span class="remark__label">1</span></p>

Html code:

Numbered list:

<section class="section">
        <div class="section__wr">
            <h2 class="section__title title">Simple text</h2>

            <ul class="remark list">
                <li class="remark__item item">
                    <span class="remark__label">1</span>
                    <p class="remark__text text">Simple text</p>
                </li>
                <li class="remark__item item">
                    <span class="remark__label">2</span>
                    <p class="remark__text text">Simple text</p>
                </li>

            </ul>
        </div>
    </section>

Simple list:

<section class="section">
        <div class="section__wr">
            <h2 class="section__title title">Simple text</h2>

            <ul class="attention">
                <li class="attention__item">
                    <p class="attention__text">Simple text</p>
                </li>
                <li class="attention__item">
                    <p class="attention__text">Simple text</p>
                </li>

            </ul>
        </div>
    </section>

enter image description here

1

I would rather recommend to stick to semantic HTML and <ol> elements for your ordered lists. This not only makes showing the numbers easier, it really should be done out of accessibility reasons and it’s good practice in general.

There are a couple of good solutions to modify the way numbers are displayed in ordered lists using CSS, if you are not happy with the way they are shown by default.

I can recommend using display: table-row; for it. Example code: https://stackoverflow.com/a/23947414

And here’s some example code for formatting content: counter(); in pseudo elements: https://craftcms.stackexchange.com/a/1781/125

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.