Skip to main content

WidgetsBox


List Layout

List Layout Basic Example

In this example, the UIkit Divided List Layout was used as the list layout. The link is displayed as a button. In addition, the fields for category and creator were displayed. The elements are displayed with animation (80 ms delay). The images are displayed with rounded corners via parameters.

  • Beautifull Landscapes

    Beautifull Landscapes

    Demo Articles
    written by Marco
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
  • Car Technology

    Car Technology

    Demo Articles
    written by Marco
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
  • Item Tag
    Google Link Tag
    Developing new things (external Google Link)

    Developing new things (external Google Link)

    Demo Articles
    Item Tag
    Google Link Tag
    written by Marco
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
  • In Code we Trust

    In Code we Trust

    Demo Articles
    written by Marco
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
  • Sparkling Events

    Sparkling Events

    Demo Articles
    written by Marco
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

List Layout Striped Example

In this example, the UIkit Striped List layout was used. The filter was set to two elements. The title (h4) was also given the UIkit class 'uk-text-bold'. The fields for category, tags and creator have been removed in this example. The article images are displayed in a circle layout according to the module option.

  • Beautifull Landscapes

    Beautifull Landscapes

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
  • Car Technology

    Car Technology

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

List Layout with Search Filter Example

The search filter hides items that do not match the search text. It is not an effective filter option, but simply hides items from the entire list that do not match the search.

  • 1.
    Beautifull Landscapes

    Beautifull Landscapes

  • 2.
    Car Technology

    Car Technology

  • 3.
    Developing new things (external Google Link)

    Developing new things (external Google Link)

  • 4.
    In Code we Trust

    In Code we Trust

  • 5.
    Sparkling Events

    Sparkling Events

Simple Layouts

Of course, "standard" list layouts are also possible. The first of the examples below shows the UIkit standard layout. The second is an "unstyled" unordered list. Simple "ordered" lists can also be created with or without additional information. The "Row Counter" option in the module settings is available for this purpose.

  • Beautifull Landscapes

    Beautifull Landscapes

  • Car Technology

    Car Technology

  • Beautifull Landscapes

  • Car Technology

  • 1.
    Beautifull Landscapes
  • 2.
    Car Technology
  • 1.
    Beautifull Landscapes

    Beautifull Landscapes

  • 2.
    Car Technology

    Car Technology