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
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
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%.