Available Components

Question 1

How to Use this feature

Answer

Add

class="checklist"

to any unordered list. Example:

<ul class="checklist">
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
</ul>

Question 2

How to Use this feature

Answer

Add

class="pros"

to any unordered list. Example:

<ul class="pros">
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
</ul>

Question 3

How to Use this feature

Answer

Add

class="cons"

to any unordered list. Example:

<ul class="cons">
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
</ul>

Question 4

How to Use this feature

Answer

Add
```
class="pros-cons"
```
to to any unordered list
PLUS: Add
```
class="pro"
```
OR
```
class="con"
```
to the "li" element of any unordered list.

Example:

<ul class="pros-cons">
    <li class="pro">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li class="pro">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li class="pro">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li class="con">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li class="con">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
</ul>

Question 5

This is my first question

Answer

This is my first answer

Question 6

This is my second question

Answer

This is my second answer

Question 7

This is my third question

Answer

This is my third answer

Question 8

How to Use this feature

Answer

Add
```
{{{snip_faq}}}
```
to the page text where you want to display the timeline.
Add the variables below to page "Vars" column and modify as needed
Add up to 20 questions and answers
Note: Can only be used once on a page
Additionally, you can also choose to use heading tags for your questions. To do so, use the relevant variation:
```
{{{snip_faq_h3}}}
```
,
```
{{{snip_faq_h4}}}
```
or
```
{{{snip_faq_h5}}}
```

Variables:

[@faq__question_1="This is my first question"]
[@faq__answer_1="This is my first answer"]

[@faq__question_2="This is my second question"]
[@faq__answer_2="This is my second answer"]

[@faq__question_3="This is my third question"]
[@faq__answer_3="This is my third answer"]

Question 9

How to Use this feature

Answer

Add
```
{{{snip_table_2col_v1}}}
```
to the page text where you want to display the table.
Add the variables below to page "Vars" column and modify as needed
Make sure to set the heading title for each column
Add up to 30 rows
Note: Can only be used once on a page
We've created 4 additional versions for each component to allow for this layout to be used more than once, simply change the version number in both the snip name & variable set:
```
{{{snip_table_2col_v2}}}
```
or
```
{{{snip_table_2col_v3}}}
```
or
```
{{{snip_table_2col_v4}}}
```
or
```
{{{snip_table_2col_v5}}}
```

Variables:

[@table_2col_v1_header_column_1="Column 1 Heading"]
[@table_2col_v1_header_column_2="Column 2 Heading"]

[@table_2col_v1_row_1_column_1="Column 1, Row 1"]
[@table_2col_v1_row_1_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]

[@table_2col_v1_row_2_column_1="Column 1, Row 2"]
[@table_2col_v1_row_2_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]

[@table_2col_v1_row_3_column_1="Column 1, Row 3"]
[@table_2col_v1_row_3_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]

-- Repeat up to 30 times by simply changing the row number each time

Question 10

How to Use this feature

Answer

Add
```
{{{snip_table_3col_v1}}}
```
to the page text where you want to display the table.
Add the variables below to page "Vars" column and modify as needed
Make sure to set the heading title for each column
Add up to 30 rows
Note: Can only be used once on a page
We've created 2 additional versions for each component to allow for this layout to be used more than once, simply change the version number in both the snip name & variable set:
```
{{{snip_table_3col_v2}}}
```
or
```
{{{snip_table_3col_v3}}}
```
or
```
{{{snip_table_3col_v4}}}
```
or
```
{{{snip_table_3col_v5}}}
```

Variables:

[@table_3col_v1_header_column_1="Column 1 Heading"]
[@table_3col_v1_header_column_2="Column 2 Heading"]
[@table_3col_v1_header_column_3="Column 3 Heading"]

[@table_3col_v1_row_1_column_1="Column 1, Row 1"]
[@table_3col_v1_row_1_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_3col_v1_row_1_column_3="Column 3, Row 1"]

[@table_3col_v1_row_2_column_1="Column 1, Row 2"]
[@table_3col_v1_row_2_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_3col_v1_row_2_column_3="Column 3, Row 2"]

[@table_3col_v1_row_3_column_1="Column 1, Row 3"]
[@table_3col_v1_row_3_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_3col_v1_row_3_column_3="Column 3, Row 3"]

-- Repeat up to 30 times by simply changing the row number each time

Question 11

How to Use this feature

Answer

Add
```
{{{snip_table_4col_v1}}}
```
to the page text where you want to display the table.
Add the variables below to page "Vars" column and modify as needed
Make sure to set the heading title for each column
Add up to 30 rows
Note: Can only be used once on a page
We've created 2 additional versions for each component to allow for this layout to be used more than once, simply change the version number in both the snip name & variable set:
```
{{{snip_table_4col_v2}}}
```
or
```
{{{snip_table_4col_v3}}}
```
or
```
{{{snip_table_4col_v4}}}
```
or
```
{{{snip_table_4col_v5}}}
```

Variables:

[@table_4col_v1_header_column_1="Column 1 Heading"]
[@table_4col_v1_header_column_2="Column 2 Heading"]
[@table_4col_v1_header_column_3="Column 3 Heading"]
[@table_4col_v1_header_column_4="Column 4 Heading"]

[@table_4col_v1_row_1_column_1="Column 1, Row 1"]
[@table_4col_v1_row_1_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_4col_v1_row_1_column_3="Column 3, Row 1"]
[@table_4col_v1_row_1_column_4="Column 4, Row 1"]

[@table_4col_v1_row_2_column_1="Column 1, Row 2"]
[@table_4col_v1_row_2_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_4col_v1_row_2_column_3="Column 3, Row 2"]
[@table_4col_v1_row_2_column_4="Column 4, Row 2"]

[@table_4col_v1_row_3_column_1="Column 1, Row 3"]
[@table_4col_v1_row_3_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_4col_v1_row_3_column_3="Column 3, Row 3"]
[@table_4col_v1_row_3_column_4="Column 4, Row 3"]

-- Repeat up to 30 times by simply changing the row number each time

Question 12

How to Use this feature

Answer

Add
```
{{{snip_table_5col_v1}}}
```
to the page text where you want to display the table.
Add the variables below to page "Vars" column and modify as needed
Make sure to set the heading title for each column
Add up to 30 rows
Note: Can only be used once on a page
We've created 2 additional versions for each component to allow for this layout to be used more than once, simply change the version number in both the snip name & variable set:
```
{{{snip_table_5col_v2}}}
```
or
```
{{{snip_table_5col_v3}}}
```
or
```
{{{snip_table_5col_v4}}}
```
or
```
{{{snip_table_5col_v5}}}
```

Variables:

[@table_5col_v1_header_column_1="Column 1 Heading"]
[@table_5col_v1_header_column_2="Column 2 Heading"]
[@table_5col_v1_header_column_3="Column 3 Heading"]
[@table_5col_v1_header_column_4="Column 4 Heading"]
[@table_5col_v1_header_column_5="Column 5 Heading"]

[@table_5col_v1_row_1_column_1="Column 1, Row 1"]
[@table_5col_v1_row_1_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_5col_v1_row_1_column_3="Column 3, Row 1"]
[@table_5col_v1_row_1_column_4="Column 4, Row 1"]
[@table_5col_v1_row_1_column_5="Lorem ipsum dolor sit, amet consectetur adipisicing elit."]

[@table_5col_v1_row_2_column_1="Column 1, Row 2"]
[@table_5col_v1_row_2_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_5col_v1_row_2_column_3="Column 3, Row 2"]
[@table_5col_v1_row_2_column_4="Column 4, Row 2"]
[@table_5col_v1_row_2_column_5="Lorem ipsum dolor sit, amet consectetur adipisicing elit."]

[@table_5col_v1_row_3_column_1="Column 1, Row 3"]
[@table_5col_v1_row_3_column_2="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, nihil"]
[@table_5col_v1_row_3_column_3="Column 3, Row 3"]
[@table_5col_v1_row_3_column_4="Column 4, Row 3"]
[@table_5col_v1_row_3_column_5="Lorem ipsum dolor sit, amet consectetur adipisicing elit."]

-- Repeat up to 30 times by simply changing the row number each time

Question 13

How to Use this feature

Answer

Add
```
class="timeline-1"
```
to any unordered list.
Wrap the date in
```
span
```
or
```
strong
```
tags
Add as many entries as needed

Question 14

How to Use this feature

Answer

Add
```
{{{snip_timeline_2}}}
```
to the page text where you want to display the timeline.
Add the variables below to page "Vars" column and modify as needed
Add up to 20 entries
Note: Can only be used once on a page

Variables:

[@timeline_2_heading_1="Heading 1"]
[@timeline_2_text_1="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto animi quia tempora ratione qui illum provident veniam officiis sequi."]
[@timeline_2_date_1="1999"]
[@timeline_2_heading_2="Heading 2"]
[@timeline_2_text_2="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto animi quia tempora ratione qui illum provident veniam officiis sequi."]
[@timeline_2_date_2="2000"]
[@timeline_2_heading_3="Heading 3"]
[@timeline_2_text_3="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto animi quia tempora ratione qui illum provident veniam officiis sequi."]
[@timeline_2_date_3="2001"]
[@timeline_2_heading_4="Heading 4"]
[@timeline_2_text_4="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto animi quia tempora ratione qui illum provident veniam officiis sequi."]
[@timeline_2_date_4="2002"]
[@timeline_2_heading_5="Heading 5"]
[@timeline_2_text_5="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto animi quia tempora ratione qui illum provident veniam officiis sequi."]
[@timeline_2_date_5="2003"]
[@timeline_2_heading_6="Heading 6"]
[@timeline_2_text_6="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto animi quia tempora ratione qui illum provident veniam officiis sequi."]
[@timeline_2_date_6="2004"]

Question 15

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-1"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-1">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 16

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-2"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-2">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 17

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-3"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-3">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 18

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-4"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-4">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 19

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-5"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-5">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 20

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-6"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-6">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 21

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-7"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-7">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 22

How to Use this feature

Answer

Change any content into an unordered list to take advantage of this preset layout
Add
```
class="list-layout-8"
```
to the "ul" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding images: This layout requires an IMG element to be present - and it should be added as the first element

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section - but consider the layout in the preview below and try maintain a visually appealing result
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ul class="list-layout-8">
    
    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    <li>
        <img src="{{{root}}}dist/img/image.png" width="346" height="119" alt="" loading="lazy">
        <h3>Heading 1</h3>
        <p>Paragraph text..</p>
        -- Any other html is allowed here..
    </li>

    -- Repeat this structure as many times as needed..

</ul>

Question 23

How to Use this feature

Answer

Change any content into an ordered list to take advantage of this preset layout
Add
```
class="featured-list"
```
to the "ol" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding an image: The image is optional and can be removed. You can however add a maximum of 1 image to each content block.

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section.
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ol class="featured-list">

    <li>
        {{#item}}
        {{#force}} Cresus-fr {{/force}}
        <!-- Set the relevant items for this box here -->
    
        <h2>Best Online Casino for Online Slots - <a {{{page}}}>{{{name}}}</a></h2>
        <!-- H2 & H3 tags are supported here - avoid using again in the content -->
    
        <img src="{{{root}}}dist/img/placeholder.jpg" alt="{{{name}}}" width="225" height="150"> 
        <!-- image is optional, will always be right aligned -->
    
        <p>Place any text here</p>
        <!-- place any text here, all basic content formatting allowed, i.e paragraphs, ordered and unordered lists, checklists, pros/cons lists etc.. -->
    
        {{{snip_featured_list_bonus featured_list_bonus_heading="Best Casino for Slots"}}}
        <!-- Include this snip to show bottom bonus area - add a custom bonus heading -->
    
    {{/item}}

    </li>
    <!-- Repeat the LI tag as many times as needed, following the same format -->
    
</ol>

Question 24

How to Use this feature

Answer

Change any content into an ordered list to take advantage of this preset layout
Add
```
class="featured-list"
```
to the "ol" element of the list
Wrap your content sections in "li" tags to separate each section and to apply this formatting
Adding an image: The image is optional and can be removed. You can however add a maximum of 1 image to each content block.

Note: All images should always have an exact height and width defined in the html - this should be the size they are created at and not what you want them to display at.

Correct image format:

<img src="https://www.top10casinos.com/dist/img/file-name.png" width="" height="" alt="" loading="lazy">

You can also use a page image:

<img src="{{{pageimage}}}" width="" height="" alt="{{{alt}}}" loading="lazy">

All other formatting opportunites such as headings, paragraphs, checklists, pros/cons, strong, hyperlinks, tables etc.. will still be available inside each section.
There is no limitation on how many elements and "li" iterations you can add
Can be used multiple times on a page with no snip/component or vars required

Example:

<ol class="featured-list">

    <li>
        {{#item}}
        {{#force}} Cresus-fr {{/force}}
        <!-- Set the relevant items for this box here -->
    
        <h2>Best Online Casino for Online Slots - <a {{{page}}}>{{{name}}}</a></h2>
        <!-- H2 & H3 tags are supported here - avoid using again in the content -->
    
        <img src="{{{root}}}dist/img/placeholder.jpg" alt="{{{name}}}" width="225" height="150"> 
        <!-- image is optional, will always be right aligned -->
    
        <p>Place any text here</p>
        <!-- place any text here, all basic content formatting allowed, i.e paragraphs, ordered and unordered lists, checklists, pros/cons lists etc.. -->
    
        {{{snip_featured_list_bonus featured_list_bonus_heading="Best Casino for Slots"}}}
        <!-- Include this snip to show bottom bonus area - add a custom bonus heading -->
    
    {{/item}}

    </li>
    <!-- Repeat the LI tag as many times as needed, following the same format -->
    
</ol>

Question 25

How to Use this feature

Answer

Change any ordered list into a step-by-step guide format
Add
```
class="how-to"
```
to the "ol" element of the list
Can be used multiple times on a page with no snip/component or vars required
Note: For best display, please ensure that each step is at least 2 lines long - otherwise the numbers and text will go out of alignment.
- However: Should your steps be only 1 line long, you can use the alternative class of
```
class="how-to how-to--sm"
```
  - this will reduce the size of the numbers and fix the alignment.

Example:


<ol class="how-to">

    <li>
        <strong>Visit the Website:</strong> Go to the official [CASINO-NAME] casino website. Make sure you are on the correct and official site to ensure the security of your personal information.
    </li>
    
    <li>
        <strong>Click on "Sign Up" or "Register":</strong> Look for a button or link that says "Sign Up" or "Register." This is usually located prominently on the homepage.
        <img src="{{{root}}}dist/img/how-to/how-to-register-jackpot-city-1.png" alt="" width="800" height="600" loading="lazy">
    </li>

    <li>
        <strong>Fill in the Registration Form:</strong> You will be asked to provide some personal information, including your name, email address, date of birth, and other relevant details. Make sure to provide accurate information.
    </li>

    <li>
        <strong>Create a Username and Password:</strong> Choose a unique username and a strong, secure password. Make sure to follow any specific requirements for creating a password.
        <img src="{{{root}}}dist/img/how-to/how-to-register-jackpot-city-2.png" alt="" width="800" height="600" loading="lazy">
    </li>

    <li>
        <strong>Verify Your Account:</strong> Some online casinos may require you to verify your email address or phone number. Follow the instructions provided to complete the verification process.
    </li>

    <li>
        <strong>Provide Additional Information:</strong> Depending on the casino's policies, you may need to provide additional information for account verification and security purposes.
    </li>

    <li>
        <strong>Accept Terms and Conditions:</strong> Read through the terms and conditions of the casino, and if you agree, check the box to indicate your acceptance.
        <img src="{{{root}}}dist/img/how-to/how-to-register-jackpot-city-3.png" alt="" width="800" height="600" loading="lazy">
    </li>

    <li>
        <strong>Complete the Registration:</strong> Once you have filled in all the necessary information, click on the "Submit" or "Register" button to complete the registration process.
    </li>

</ol>

H	HIT
S	STAND
DD	DOUBLE DOWN
SP	SPLIT
R	SURRENDER

H	HIT	S	STAND
DD	DOUBLE DOWN	SP	SPLIT
R	SURRENDER

YOUR HAND		DEALER
YOUR HAND		2	3	4	5	6	7	8	9	T	A
HARD	Hard 5	H	H	H	H	H	H	H	H	H	H
	Hard 6	H	H	H	H	H	H	H	H	H	H
	Hard 7	H	H	H	H	H	H	H	H	H	H
	Hard 8	H	H	H	H	H	H	H	H	H	H
	Hard 9	H	DD	DD	DD	DD	H	H	H	H	H
	Hard 10	DD	DD	DD	DD	DD	DD	DD	DD	H	H
	Hard 11	DD	DD	DD	DD	DD	DD	DD	DD	DD	DD
	Hard 12	H	H	S	S	S	H	H	H	H	H
	Hard 13	S	S	S	S	S	H	H	H	H	H
	Hard 14	S	S	S	S	S	H	H	H	H	H
	Hard 15	S	S	S	S	S	H	H	H	H	H
	Hard 16	S	S	S	S	S	H	H	H	H	H
	Hard 17	S	S	S	S	S	S	S	S	S	S
	Hard 18+	S	S	S	S	S	S	S	S	S	S
SOFT	Ace + 2	H	H	H	DD	DD	H	H	H	H	H
	Ace + 3	H	H	H	DD	DD	H	H	H	H	H
	Ace + 4	H	H	DD	DD	DD	H	H	H	H	H
	Ace + 5	H	H	DD	DD	DD	H	H	H	H	H
	Ace + 6	H	DD	DD	DD	DD	H	H	H	H	H
	Ace + 7	DD	DD	DD	DD	DD	S	S	H	H	H
	Ace + 8	S	S	S	S	DD	S	S	S	S	S
	Ace + 9	S	S	S	S	S	S	S	S	S	S
PAIRS	(2,2)	SP	SP	SP	SP	SP	SP	H	H	H	H
	(3,3)	SP	SP	SP	SP	SP	SP	H	H	H	H
	(4,4)	H	H	H	SP	SP	H	H	H	H	H
	(5,5)	D	D	D	D	D	D	D	D	H	H
	(6,6)	SP	SP	SP	SP	SP	H	H	H	H	H
	(7,7)	SP	SP	SP	SP	SP	SP	H	H	H	H
	(8,8)	SP	SP	SP	SP	SP	SP	SP	SP	SP	SP
	(9,9)	SP	SP	SP	SP	SP	S	SP	SP	S	S
	(T,T)	S	S	S	S	S	S	S	S	S	S
	(A,A)	SP	SP	SP	SP	SP	SP	SP	SP	SP	SP

YOUR HAND	DEALER
YOUR HAND	2	3	4	5	6	7	8	9	T	A
Hard 5	H	H	H	H	H	H	H	H	H	H
Hard 6	H	H	H	H	H	H	H	H	H	H
Hard 7	H	H	H	H	H	H	H	H	H	H
Hard 8	H	H	H	H	H	H	H	H	H	H
Hard 9	H	DD	DD	DD	DD	H	H	H	H	H
Hard 10	DD	DD	DD	DD	DD	DD	DD	DD	H	H
Hard 11	DD	DD	DD	DD	DD	DD	DD	DD	DD	DD
Hard 12	H	H	S	S	S	H	H	H	H	H
Hard 13	S	S	S	S	S	H	H	H	H	H
Hard 14	S	S	S	S	S	H	H	H	H	H
Hard 15	S	S	S	S	S	H	H	H	H	H
Hard 16	S	S	S	S	S	H	H	H	H	H
Hard 17	S	S	S	S	S	S	S	S	S	S
Hard 18+	S	S	S	S	S	S	S	S	S	S

YOUR HAND	DEALER
YOUR HAND	2	3	4	5	6	7	8	9	T	A
Ace + 2	H	H	H	DD	DD	H	H	H	H	H
Ace + 3	H	H	H	DD	DD	H	H	H	H	H
Ace + 4	H	H	DD	DD	DD	H	H	H	H	H
Ace + 5	H	H	DD	DD	DD	H	H	H	H	H
Ace + 6	H	DD	DD	DD	DD	H	H	H	H	H
Ace + 7	DD	DD	DD	DD	DD	S	S	H	H	H
Ace + 8	S	S	S	S	DD	S	S	S	S	S
Ace + 9	S	S	S	S	S	S	S	S	S	S

SPLITS (Yes or No)*	2 to 6	7 to A
2/2, 3/3, 6/6, 7/7, 9/9	YES	NO
8/8, A/A	YES	YES
4/4, 5/5, 10/10	NO	NO

HARD	2	3	4	5	6	7	8	9	10	A
5-7	H	H	H	H	H	H	H	H	H	H
8	H	H	H	DD	DD	H	H	H	H	H
9	DD	DD	DD	DD	DD	H	H	H	H	H
10	DD	DD	DD	DD	DD	DD	DD	DD	H	H
11	DD	DD	DD	DD	DD	DD	DD	DD	DD	DD
12	H	H	S	S	S	H	H	H	H	H
13	S	S	S	S	S	H	H	H	H	H
14	S	S	S	S	S	H	H	H	H	H
15	S	S	S	S	S	H	H	H	H	H
16	S	S	S	S	S	H	H	H	R	R
17 +	S	S	S	S	S	S	S	S	S	S

SPLITS	2	3	4	5	6	7	8	9	10	A
2, 2	SP	SP	SP	SP	SP	SP	H	H	H	H
3, 3	SP	SP	SP	SP	SP	SP	SP	H	H	H
4, 4	H	H	SP	SP	SP	H	H	H	H	H
6, 6	SP	SP	SP	SP	SP	SP	H	H	H	H
7, 7	SP	SP	SP	SP	SP	SP	SP	H	R	H
8, 8	SP	SP	SP	SP	SP	SP	SP	SP	SP	SP
9, 9	SP	SP	SP	SP	SP	S	SP	SP	S	S
A, A	SP	SP	SP	SP	SP	SP	SP	SP	SP	SP

SPLITS	2	3	4	5	6	7	8	9	10	A
2, 2	SP	SP	SP	SP	SP	SP	H	H	H	H
3, 3	SP	SP	SP	SP	SP	SP	SP	H	H	H
4, 4	H	H	SP	SP	SP	H	H	H	H	H
6, 6	SP	SP	SP	SP	SP	SP	H	H	H	H
7, 7	SP	SP	SP	SP	SP	SP	SP	H	R	R
8, 8	SP	SP	SP	SP	SP	SP	SP	SP	SP	SP
9, 9	SP	SP	SP	SP	SP	S	SP	SP	S	Ps
A, A	SP	SP	SP	SP	SP	SP	SP	SP	SP	SP

Available Components

Basic Formatting

Checklist

Pros List

Cons List

Pros / Cons List Combined

FAQ

Content Tables

2 Column Table Layout

3 Column Table Layout

4 Column Table Layout

5 Column Table Layout

Timelines

Timeline #1

Timeline #2

Custom List Layouts

Layout #1

Heading 1

Heading 2

Heading 3

Layout #2

Heading 1

Heading 2

Heading 3

Layout #3

Heading 1

Heading 2

Layout #4

Heading 1

Heading 2

Heading 3

Layout #5

Heading 1

Heading 2

Heading 3

Layout #6

Heading 1

Heading 2

Heading 3

Layout #7

Heading 1

Heading 2

Layout #8

Heading 1

Heading 2

Heading 3

List Layout Top Games

Game Title/Heading Here

Game Title/Heading Here

Featured List Layouts

Featured List Layout #1

Best Online Casino for Online Slots - Cresus Casino

Best Online Casino for Online Slots - Wild Sultan

How To Layouts

How to Register at [CASINO-NAME] casino on desktop:

How to Register at [CASINO-NAME] casino on Mobile:

Blackjack Strategy Tables

Basic Blackjack Strategy

Table Legend

Table Legend - Variation 2

Blackjack Strategy Chart - Combinded

Hard Totals

Soft Totals

Split/Pairs

Hard - Variation 2

Soft - Variation 2

Split/Pairs - Variation 2

Single Deck, Dealer Stands on Soft 17

Hard Totals

Soft Totals

Split/Pairs

Single Deck, Dealer Hits on Hard 17

Hard Totals

Soft Totals

Split/Pairs

4-8 Decks, Dealer Stands on Hard 17

Hard Totals

Soft Totals

Split/Pairs

4-8 Decks, Dealer Hits on Hard 17