Skip to the content

This page demonstrates the different types of "Page Components" you can add to a page as well as the different types of "Sitewide Pods" available.

The "Page Components" below allow you to add different stylised elements to a page without having to worry about the HTML behind the scenes.

The "Sitewide pods" on the right which are defined at a global level within your "Global Settings" have been overridden on this page in order to demonstrate all of the different types of pods that are available.

Price list example

Ideal for having a well styled restaurant menu.

Salads

Rocket and roasted pear salad

with a choice of pecorino, mull cheddar or gorgonzola

£6.50

Caesar salad

with bacon 7.50
with avocado & seasonal fruits 7.50
with Hebridean blue cheese 7.50
with roast chicken breast 9.00
with peat smoked salmon 9.00

£6.50

Bacon and avocado salad

served with a warm balsamic dressing

£7.50

Grilled goats cheese salad with walnuts

£7.50

Tabbed section example

Great for grouping related content and reducing the amount of screen space used.

1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Here is a text section

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Blockquote example

Umbraco, the most powerful and flexible CMS I have ever used.

Marc Love, Web Developer

Code section example

The weather widget demonstrates a possible usage of the "Code Section" page component. You can use this component to add third party widgets as demonstarted below.

The below widget is provided by forecast.io

Another text section

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Accordion section example

Useful for adding an FAQ section of questions and answers to your page.

1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Resources section example

Useful for grouping a list of resources that are related to your content together. Can be used to link to downloadable files or link to internal or external references.

External link

This is an example of an external link opening in a new window.

External web link - http://www.google.com

Internal link

This is an example of an internal link.

Document download

This is an example of a document download.

Download - File size: 35KB

Here are some alert boxes

This is a standard alert.

This is a green alert.

This is an amber alert.

This is a red alert with the close option hidden.

Slideshow section example

940x432 Demo Image
Example Image 1
940x432 Demo Image
Example Image 2

Gallery section example

This component demonstates how a gallery of images or videos can be added to a page.

List section example

An example usage of this component would be to organise a list of people that may be part of your organisation.

Marc Love

Marc Love

Head of Development

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Email: hello@uskinned.net

Paul Daly

Paul Daly

Head of Creative

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Email: hello@uskinned.net

Derek Devlin

Jamie White

Head of Marketing

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Email: hello@uskinned.net

Links section example

This is a great tool for increasing your internal link structure and giving your site additional SEO benefits.

Let Us Be Your Alibi

A friendly crowd, Hi-Def TVs, great food - that's what you'll always find at Alibi. Live broadcasts of NFL, MLB, NBA, and college football and basketball games.
Example Image Pod

Alibi 25

(636) 527-2425

15856 Clayton Road
Ellisville, MO 63011

Umbraco, the most powerful and flexible CMS I have ever used.

Marc Love, Web Developer

Let Us Be Your Alibi

Now Under New Management. We are bringing in more Live Music. Stay tuned for all of the great new things that are in the works for Alibi. Come check out the new look, menu, and specials at Alibi 25!