Skip to main content

WidgetsBox


Grid Layout

Default Layout Example

Standard card design, center aligned small grid with a search box as a filter. The cards were styled using various additional CSS classes direct from within the module backend.

Searchfield

uk-margin-bottom uk-card uk-card-default uk-card-body uk-card-hover uk-card-small uk-border-rounded

Cards

uk-border-rounded uk-overflow-hidden uk-card-hover
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...
Developing new things (external Google Link)

Developing new things (external Google Link)

Item Tag
Google Link Tag
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
In Code we Trust

In Code we Trust

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

Sparkling Events

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

Primary Layout Example

Primary card design - based on UIkit. Small grid limited to four elements. The cards were styled using various additional CSS classes direct from within the module backend. In this example the image position is set to bottom and the match height parameter to 'Card Body'.

Content

uk-text-justify

Cards

uk-border-rounded uk-overflow-hidden uk-card-hover

Beautifull Landscapes

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

Car Technology

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

Developing new things (external Google Link)

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

In Code we Trust

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
In Code we Trust

Secondary Grid with Images Left / Right Example

Secondary card design - based on UIkit. Default grid size limited to four elements. Image positioned to left (below to the right).

Image Position

The article images can be displayed above, below, to the left or to the right of the elements. Depending on the positioning, various options are available for the height/width of the images.

Image Width

The width of the images can be selected in the module settings from fixed sizes: small, medium, large, or flexible widths: 20%, 25%, 33%, 40%, 50%, 60%, 66%, 75%, 80%, 100%.

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...
Developing new things (external Google Link)

Developing new things (external Google Link)

Item Tag
Google Link Tag
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
In Code we Trust

In Code we Trust

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

Beautifull Landscapes

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

Car Technology

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

Developing new things (external Google Link)

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

In Code we Trust

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...
In Code we Trust