CSS Template Layout Module Examples

Content priority Source order

e.g.: Content, Related content, Navigation

Heading for content 1

Content 1. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Heading for content 2

Content 2. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Heading for content 3

Content 3. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Navigation

Visual priority source order

e.g.: navigation, Content, Related content

Navigation

Heading for content 1

Content 1. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Heading for content 2

Content 2. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Heading for content 3

Content 3. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Complete mess source order

e.g.: Related content, Navigation, Content

Navigation

Heading for content 2

Content 2. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Heading for content 1

Content 1. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.

Heading for content 3

Content 3. Nunc euismod ligula ac dolor venenatis id pretium orci molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ullamcorper justo. Integer at lacus orci, nec sollicitudin lectus. Vestibulum ac nulla in quam euismod blandit in vitae elit.