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
May be used between components to add some space.
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 vertically, otherwise the size of the display will jump up and down
- Sometimes it's best to put the carousel at the top of a page
- For photos, a 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 ( One Equal)
A single column with a column wrapper; the wrapper includes three items:
- Rich Text
- Link Button
- Drupal Block - to add space under the Link Button
Style Settings
Background Image
The column has a background image that spans the column - which is the whole page.
Stay Connected with Everyone
Access important information
Columns ( One Equal)
A single column with a column wrapper; the wrapper includes three items:
- Rich Text
- Link Button
- Drupal Block - to add space under the Link Button
Style Settings
Background Image
The column has a background image that spans the column - which is the whole page.
Width
Width = Narrow, this will offset the text to the left side of the background
Stay Connected with Everyone
Access important information
Columns ( Three Equal)
Column One - No Column Wrapper
Two or three columns recommended
A fourth column squeezes the content
- No Column Wrapper - only one component per column
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 - No Column Wrapper
- No Column Wrapper - only one component per column
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 - Column Wrapper
First Rich Text Field
Using a Column Wrapper, there can be multiple components within one column
For example, the two Rich Text fields shown here
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
Second Rich Text Field
Columns (Two Uneven)
Styling Settings
Column Style
- 3/4 - 1/4
- 2/3 - 1/3
- 1/4 - 3/4
- 1/3 - 2/3 (see example below)
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.
Column Two (2/3)
A Taste of Unity on a Sunday Visit
Columns (Three Uneven)
Styling Settings
Column Style
- 1/4 - 1/2 - 1/4 (see example below)
- 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
Background Image
Five single color background images
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)
EXAMPLE OF USING COLUMN WRAPPER
First Component:
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
Second Component:
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
Third Component:
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 an often used color.
By selecting Link Target = New Window, the link will open in a new window.
Modal
A "modal" is a pop-up display.
Modal button text and Modal title are often, but not always, the same.
Tabs
Tab One
A Tab name should begin with “▷ ” - a triangle and a space to help distinguish a tab. Copy the triangle character from this page.
The tab body should repeat the Tab name at the top.
Tabs are often 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
Tab two, component #1: Rich Text
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 two, component #2: Rich Text
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
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
Not recommended. Use one of the Columns components instead.
View
Systems use only
Webform
An existing webform may be embedded, for example the Suggestions webform:
Suggestions Webform