Sample Text for the Text and image component.
Contents
- Title
- Header Image
- Body (Edit Summary)
- Page Content / Components
Title
The Title is both the page title (e.g. "Page Elements”), the internal Content title and the source of a default automatic URL alias (e.g. “/page-elements”).
Header Image
A page header image is optional and recommended for most most webpages. It is an effective visual to introduce a page. See the image at the top of this page. Notice that the page name is inserted into the bottom margin of a header image.
The stated size is 2000 x 400 pixels. However, on most laptops and PC monitors, only the middle 1600 pixels will be displayed. On narrower screens such as mobile phones, only the middle 400 or so pixels will be displayed. Therefore, the middle of the image should be meaningful. The header image for this page when viewed from different platforms gives an indication of the number of pixels displayed.
Body (Edit Summary)
Text with an Arresting Image Centered
To span the width of a page, a 900 px width should be used. Wider than 900 px will spill outside of the page boundary to the right.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper.
Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo.
Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.
Text and image right-adjusted without a caption
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Text and image right-adjusted with a caption
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt
Text and image left-adjusted without a caption
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Text and smaller image right-adjusted without a caption
Felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper.
Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo.
Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.
Embedded YouTube
YouTube, width="560" height="315" caption
Paragraph Format Options
Normal: use for 99% of the text
Heading 1 - page title, avoid use within body
Heading 2 - major page division, often centered
Heading 3 - use for 99% of section headers
Heading 4 - occasional use for subsection headers
Bold - An Alternate Header Option
Heading 5 - An option for image captions. An alternative to the builtin image caption which has limited editing.
Heading 6 - use for the "Last updated by ..." at the bottom right of the page; may also be used for footnotes.
Formatted: rarely used - an example of the "formatted" format. Entering <return> will not create paragraph spacing, just a new line.
In Photoshop Elements, use "Image/Resize/Image Size..." to establish the desired pixel width and height. Then use "Save for Web..." to render the smallest download size that will display clearly. A free app such as http://gimp.org is an alternative to Photoshop.
You may also use Image Optimizer to prepare images for the web. Specify "Quality: Normal", and the desired Max Width & Max Height in pixels.
Download sizes of around 100 - 500 KB are best and give great resolution on computer displays. Download sizes above 1MB take longer to download to a web browser and do not render with greater resolution. Individuals with slower internet connections will find a web page unresponsive if the image sizes are not adjusted beforehand.
Page Content / Components
Accordion
Accordion - Open Me / Close Me
- Accordion component is often used with a rich text field.
- There may be stacked components within the accordion
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Drupal Block
System use only
Carousel
- A carousel can be used to scroll horizontally any data type, for example, rich text with photos
- Scrolling components should be all the same size, otherwise the size of the display will jump up and down
- A good practice is to put the carousel at the top of a page
- For photos, the recommended photo size is 900x508 px
- Scrolling is either manual or automatic interval
- Automatic scrolling intervals of one to seven seconds
- Four seconds is about right for photo scrolling
Columns (Equal)
Column One
Two or three columns recommended
A fourth column squeezes the content
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Column Two
Two or three columns recommended
A fourth column squeezes the content
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Column Three
Two or three columns recommended
A fourth column squeezes the content
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Example row of three images.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis.
Example row of three images
Example row of three images
Example of a row of two images.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis.
Example of a row of two images.
Columns (Two Uneven)
STYLING SETTINGS
Column Style
- 3/4 - 1/4
- 2/3 - 1/3
- 1/4 - 3/4
- 1/3 - 2/3
Column One (1/3)
In the infinity of life where I am. Life is perfect, whole and complete. I believe in a power far greater than I am that flows through every aspect of my night and day. I open myself to the wisdom within.
Rev. Ron Karstetter
Column Two (2/3)
Columns (Three Uneven)
STYLING SETTINGS
Column Style
- 1/4 - 1/2 - 1/4
- 1/2 - 1/4 - 1/4
- 1/4 - 1/4 - 1/2
- 1/6 - 2/3 - 1/6
- 2/3 - 1/6 - 1/6
- 1/6 - 1/6 - 2/3
Column One (1/4)
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt
Column Two (1/2)
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt
Column Three (1/4)
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt
Link Buttons
Color: Teal is the approved color; avoid using other colors
Modal
A "modal" is a pop-up display.
Modal button text and Modal title are often, but not always, the same.
Rich Text
The contents of a rich text field are described above in the Body (Edit Summary) section.
Tabs
TAB ONE
A Tab name should begin with “▷ ” - a triangle and a space to help distinguish a tab.
The tab body should repeat the Tab name at the top.
Tabs are usually placed at the top or bottom of a page.
If tabs are placed within the body of a page, different lengths may cause content below to jump up and down.
TAB TWO
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
TAB THREE
Text and image
Not recommended. Use one of the Columns components instead.
Image
View
Systems use only
Webform
An existing webform may be embedded, for example the Suggestions webform