Stalis Modules

This page shows examples of all page components (modules)

Caring for people by caring for data. Speak to one of our data experts today.

Text Section 2 Alt Layout?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. Nam vulputate eros at dui laoreet, id lobortis diam porta.
No button colour option… TODO: Add option

Text Sect Left Title

Heading 3 font size demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. Nam vulputate eros at dui laoreet, id lobortis diam porta.

No button colour option… TODO: Add option

Form style

General Columns

Col 1 Title

General columns provide a way to create adaptive layouts. For example, it could be used to create a call-to-action panel…

TODO: Check animations

Ut at libero eu nulla malesuada porta at eu risus. Nullam tristique, urna gravida ultricies scelerisque, diam urna sagittis lacus, sit amet egestas mi purus at felis.

Button colour is set to DARK GREEN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. Nam vulputate eros at dui laoreet, id lobortis diam porta. Ut at libero eu nulla malesuada porta at eu risus. Nullam tristique, urna gravida ultricies scelerisque, diam urna sagittis lacus, sit amet egestas mi purus at felis.

Button colour is set to GREY

Stalis

Black button

Suspendisse ac tempor tellus, in dictum lacus. Mauris facilisis nibh eu orci mollis, vitae aliquam urna convallis. Donec mauris elit, fermentum eget placerat id, lacinia at nisi. Integer nisi odio, pulvinar sed diam vel, placerat tempor risus. Nulla bibendum imperdiet nunc, quis pharetra sem faucibus quis. Suspendisse viverra eros ut placerat consectetur. Vivamus tincidunt sit amet lacus in tincidunt.

Icon and Text Boxes

This is a brief intro. Can be left blank. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, erat quis lobortis ornare, lectus magna aliquet dui, sed suscipit sem leo eget quam.

Icon & Text box 1
Icon & Text box 1

Pellentesque lobortis, enim ac lacinia eleifend, neque tortor pharetra est, eget bibendum velit arcu quis lacus.

Icon & Text box 2
Icon & Text box 2

Default icon used if none specified

Stalis
Custom icon

Praesent varius dignissim nibh vitae tristique. Maecenas ac metus congue, blandit massa ut, molestie felis.

Box 4
Box 4

Layout will vary based on number of boxes. Ideally 3 or 4 cols, but breaking to 3 cols when 5 or more...

No heading for this one. Donec scelerisque porta purus eget convallis. Ut rhoncus porta fringilla.

Icon and Text Boxes

This is a brief intro. Can be left blank. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, erat quis lobortis ornare, lectus magna aliquet dui, sed suscipit sem leo eget quam.

Icon & Text box 1
Icon & Text box 1

Pellentesque lobortis, enim ac lacinia eleifend, neque tortor pharetra est, eget bibendum velit arcu quis lacus.

Icon & Text box 2
Icon & Text box 2

Default icon used if none specified

Stalis
Custom icon

Praesent varius dignissim nibh vitae tristique. Maecenas ac metus congue, blandit massa ut, molestie felis.

Box 4
Box 4

Layout will vary based on number of boxes. Ideally 3 or 4 cols, but breaking to 3 cols when 5 or more...

No heading for this one. Donec scelerisque porta purus eget convallis. Ut rhoncus porta fringilla.

Text and Image

This module may be unnecessary as Text & Media serves most of the requirements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. 

Text and Image 2

This module may be unnecessary as Text & Media serves most of the requirements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. 

Text and Slide/Media h2

Heading 3

This section has various layout options:

  • Text and gallery
  • Text and image
  • Text and animation
  • Text and video pop-up

The background is always black, though the section background can be changed via OPTIONS.

Button colour is set to WHITE

Animated Module

This is an example of the Text & Media animation…

Important notes about this layout:

  • Only a maximum of 4 images are allowed. All others will be ignored (not displayed).
  • The first image will form the circular background. An appropriately blurred/faded image should be selected.
  • The length of the accompanying copy (i.e. this text) may impact the height of the box, so should be limited appropriately.

Animated Module

This is an example of the Text & Media animation…

Important notes about this layout:

  • Only a maximum of 4 images are allowed. All others will be ignored (not displayed).
  • The first image will form the circular background. An appropriately blurred/faded image should be selected.
  • The length of the accompanying copy (i.e. this text) may impact the height of the box, so should be limited appropriately.

Text and Media:
Video

Pop-up video from YouTube with poster image..

Video 2 (no poster)

Vimeo test

Smaller title size set in options

This is another version of the Text and Media Section. In this case, it is another video panel, but we have not added a poster image in order to test the default post image…

Also, no ID has been specified. This is to test the auto-id functionality, which is important for linking a pop-up dialogue (Vimeo video, in this case) to the trigger link…

Full width Image
(probably not required)

Grid Layout (not required/implemented?)

Block 1

Need to check animations

Customer Stories

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis.

Customer stories

White block

Nam vulputate eros at dui laoreet, id lobortis diam porta. Ut at libero eu nulla malesuada porta at eu risus.

Black block

Pellentesque lobortis, enim ac lacinia eleifend, neque tortor pharetra est, eget bibendum velit arcu quis lacus. Praesent varius dignissim nibh vitae tristique. Maecenas ac metus congue, blandit massa ut, molestie felis.

Grey block

Image block

Selected background colour determines main text font colour!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. Nam vulputate eros at dui laoreet, id lobortis diam porta. Ut at libero eu nulla malesuada porta at eu risus. Nullam tristique, urna gravida ultricies scelerisque, diam urna sagittis lacus, sit amet egestas mi purus at felis. Suspendisse ac tempor tellus, in dictum lacus. Mauris facilisis nibh eu orci mollis, vitae aliquam urna convallis. Donec mauris elit, fermentum eget placerat id, lacinia at nisi.

One more block

In rutrum massa sit amet enim laoreet fringilla. Aliquam erat volutpat. Proin auctor feugiat orci in laoreet. In lacinia lobortis est, quis feugiat purus ultrices at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex felis, tempus sit amet elit a, pellentesque pulvinar mauris. Nam mauris elit, ullamcorper at lacinia ut, tempor sed nisl.

Video block (local)

External Video

Testimonials (carousel)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. Nam vulputate eros at dui laoreet, id lobortis diam porta.

A. Person| Pad

Donec mauris elit, fermentum eget placerat id, lacinia at nisi. Integer nisi odio, pulvinar sed diam vel, placerat tempor risus. Nulla bibendum imperdiet nunc, quis pharetra sem faucibus quis. Suspendisse viverra eros ut placerat consectetur. Vivamus tincidunt sit amet lacus in tincidunt.

Different| Length

Pellentesque lobortis, enim ac lacinia eleifend, neque tortor pharetra est, eget bibendum velit arcu quis lacus.

Short| Length

Team Module

Team Member
Bob person

Tester

This ought to be replaced with the standard biogs module

test
Test Person Name Wrapped

Longer job title than expected

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, erat quis lobortis ornare, lectus magna aliquet dui, sed suscipit sem leo eget quam. Duis at lectus tortor. Pellentesque placerat, diam ac tristique sagittis, leo massa lacinia erat, vel congue nulla leo a lorem. Morbi feugiat lacinia pharetra. Vivamus cursus lacus sed tellus laoreet, et posuere tortor vulputate. Vivamus tempor nulla et egestas lobortis. Nulla at odio auctor, vehicula erat id, pharetra ligula. Curabitur elit ligula, sodales eu ex et, vulputate rhoncus nulla.

FAQ Section

  • What is this?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis tempus eros, eget scelerisque tortor congue in. Duis interdum lectus vitae lorem molestie ornare. Sed vulputate ornare turpis non venenatis. Nam vulputate eros at dui laoreet, id lobortis diam porta. Ut at libero eu nulla malesuada porta at eu risus. Nullam tristique, urna gravida ultricies scelerisque, diam urna sagittis lacus, sit amet egestas mi purus at felis. Suspendisse ac tempor tellus, in dictum lacus. Mauris facilisis nibh eu orci mollis, vitae aliquam urna convallis. Donec mauris elit, fermentum eget placerat id, lacinia at nisi. Integer nisi odio, pulvinar sed diam vel, placerat tempor risus. Nulla bibendum imperdiet nunc, quis pharetra sem faucibus quis. Suspendisse viverra eros ut placerat consectetur. Vivamus tincidunt sit amet lacus in tincidunt.

  • What if the question is unexpectedly long and doesn't fit in the available space blah blah blah olé biscuit barrel?

    Pellentesque lobortis, enim ac lacinia eleifend, neque tortor pharetra est, eget bibendum velit arcu quis lacus. Praesent varius dignissim nibh vitae tristique. Maecenas ac metus congue, blandit massa ut, molestie felis. Donec scelerisque porta purus eget convallis. Ut rhoncus porta fringilla. Sed lacus urna, ullamcorper non interdum eget, gravida sed odio. Ut sodales dolor nulla, ut vestibulum tortor lobortis a.

    In rutrum massa sit amet enim laoreet fringilla. Aliquam erat volutpat. Proin auctor feugiat orci in laoreet. In lacinia lobortis est, quis feugiat purus ultrices at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex felis, tempus sit amet elit a, pellentesque pulvinar mauris. Nam mauris elit, ullamcorper at lacinia ut, tempor sed nisl.

Pop-up Module Example

This is an example of a pop-up module. It can be set to appear after a fixed amount of time after the page loads.

Basic content can be added via the editor.

Once dismissed, the pop-up can be accessed again via a floating button on the left. Otherwise, it will pop up again after a fixed period defined in the admin has passed.

Caring for people by caring for data. Speak to one of our data experts today.