Foodies template

Menu
  • Home
  • Store
  • Features
    • Module Positions
    • Module Variations
    • Navigation Styles
      • Main Navigation
      • Vertical Menus
      • Horizontal Menus
    • Typography
      • Image Styles
      • Button Styles
      • Bootstrap Styles
      • List Styles
      • Icon Styles
    • Error 404 Page
    • Offline Page
  • Joomla
    • Joomla Content
      • Category Blog
      • List All Categories
      • Single Article
      • Archived Article
      • Tagged Items
      • List of Tagged Items
      • List of All Tags
      • Search
      • Smart Search
      • Single News Feed
      • Iframe Wrapper
    • Joomla Modules
  • Extensions
  • Docs

Foodies template

  • Home
  • Store
  • Features
    • Module Positions
    • Module Variations
    • Navigation Styles
      • Main Navigation
      • Vertical Menus
      • Horizontal Menus
    • Typography
      • Image Styles
      • Button Styles
      • Bootstrap Styles
      • List Styles
      • Icon Styles
    • Error 404 Page
    • Offline Page
  • Joomla
    • Joomla Content
      • Category Blog
      • List All Categories
      • Single Article
      • Archived Article
      • Tagged Items
      • List of Tagged Items
      • List of All Tags
      • Search
      • Smart Search
      • Single News Feed
      • Iframe Wrapper
    • Joomla Modules
  • Extensions
  • Docs

Designed for the lists inside the articles or custom type HTML Joomla! modules, the list styles can be used to customize the appearance of your lists and adapt to every background type (light, clear, dark and color).

List Styles

organize content elements with lists

To use the list styles just type the following code inside your text editor. Make sure the code is added in the HTML mode:

Square Unordered List

  • list item
  • list item
  • list item
  • list item
<ul class="favth-list-square">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Square Ordered List

  1. list item
  2. list item
  3. list item
  4. list item
<ol class="favth-list-square">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Circle Unordered List

  • list item
  • list item
  • list item
  • list item
<ul class="favth-list-circle">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Circle Ordered List

  1. list item
  2. list item
  3. list item
  4. list item
<ul class="favth-list-circle">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

List Style + light

The list style adapts for every background type:

  • list item
  • list item
  • list item
  • list item

List Style + clear/dark

The list style adapts for every background type:

  • list item
  • list item
  • list item
  • list item

List Style + color

The list style adapts for every background type:

  • list item
  • list item
  • list item
  • list item
To use the list styles, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

© 2023 FavThemes