Accordion / Drop Down
The Accordion / Drop Down content type is created separately, with no need for a wrapper. All brand colours can be used. Some Bootstrap colours can also be used.
Examples
The following accordion is on it's own.
Accordion - UoL Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae nisi felis. Sed imperdiet, nulla eget sagittis suscipit, tortor justo iaculis ex, vitae aliquet magna augue quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer vulputate euismod orci, placerat pretium justo egestas ac. Cras tellus augue, ornare vel magna non, imperdiet laoreet libero. Morbi quis sagittis mauris. In id nisl sit amet turpis consectetur pretium. Proin sed ante venenatis, mattis orci eget, iaculis purus. Donec in leo pretium, posuere augue at, fringilla mi. Donec mattis libero tortor, id ornare purus scelerisque ac. Mauris eu nunc magna. Maecenas ut congue purus, non blandit mi. Ut eu tellus bibendum, laoreet neque quis, semper leo.
Morbi fringilla dignissim laoreet. Nunc feugiat tincidunt sapien a pretium. Proin malesuada viverra tempus. Etiam dictum elementum malesuada. Integer ultricies tortor sit amet orci imperdiet, non feugiat ipsum tempus. Sed dignissim lacinia sagittis. Maecenas mollis lorem imperdiet aliquam scelerisque. Nullam bibendum fermentum luctus. Vivamus luctus porta ligula, a facilisis sem aliquam in. Praesent dignissim euismod nunc, id sollicitudin ante malesuada at. Phasellus risus quam, rutrum ut neque id, mattis interdum libero. Ut convallis tristique volutpat. Integer mi est, luctus vel dapibus vitae, vestibulum eget libero. Duis sed condimentum massa. Donec malesuada, augue eget rutrum luctus, arcu odio congue ex, eu finibus justo lectus in diam.
Whereas the following accordions are layered together.
Accordion - UoL Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae nisi felis. Sed imperdiet, nulla eget sagittis suscipit, tortor justo iaculis ex, vitae aliquet magna augue quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer vulputate euismod orci, placerat pretium justo egestas ac. Cras tellus augue, ornare vel magna non, imperdiet laoreet libero. Morbi quis sagittis mauris. In id nisl sit amet turpis consectetur pretium. Proin sed ante venenatis, mattis orci eget, iaculis purus. Donec in leo pretium, posuere augue at, fringilla mi. Donec mattis libero tortor, id ornare purus scelerisque ac. Mauris eu nunc magna. Maecenas ut congue purus, non blandit mi. Ut eu tellus bibendum, laoreet neque quis, semper leo.
Morbi fringilla dignissim laoreet. Nunc feugiat tincidunt sapien a pretium. Proin malesuada viverra tempus. Etiam dictum elementum malesuada. Integer ultricies tortor sit amet orci imperdiet, non feugiat ipsum tempus. Sed dignissim lacinia sagittis. Maecenas mollis lorem imperdiet aliquam scelerisque. Nullam bibendum fermentum luctus. Vivamus luctus porta ligula, a facilisis sem aliquam in. Praesent dignissim euismod nunc, id sollicitudin ante malesuada at. Phasellus risus quam, rutrum ut neque id, mattis interdum libero. Ut convallis tristique volutpat. Integer mi est, luctus vel dapibus vitae, vestibulum eget libero. Duis sed condimentum massa. Donec malesuada, augue eget rutrum luctus, arcu odio congue ex, eu finibus justo lectus in diam.
Accordion - UoL Accent Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae nisi felis. Sed imperdiet, nulla eget sagittis suscipit, tortor justo iaculis ex, vitae aliquet magna augue quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer vulputate euismod orci, placerat pretium justo egestas ac. Cras tellus augue, ornare vel magna non, imperdiet laoreet libero. Morbi quis sagittis mauris. In id nisl sit amet turpis consectetur pretium. Proin sed ante venenatis, mattis orci eget, iaculis purus. Donec in leo pretium, posuere augue at, fringilla mi. Donec mattis libero tortor, id ornare purus scelerisque ac. Mauris eu nunc magna. Maecenas ut congue purus, non blandit mi. Ut eu tellus bibendum, laoreet neque quis, semper leo.
Morbi fringilla dignissim laoreet. Nunc feugiat tincidunt sapien a pretium. Proin malesuada viverra tempus. Etiam dictum elementum malesuada. Integer ultricies tortor sit amet orci imperdiet, non feugiat ipsum tempus. Sed dignissim lacinia sagittis. Maecenas mollis lorem imperdiet aliquam scelerisque. Nullam bibendum fermentum luctus. Vivamus luctus porta ligula, a facilisis sem aliquam in. Praesent dignissim euismod nunc, id sollicitudin ante malesuada at. Phasellus risus quam, rutrum ut neque id, mattis interdum libero. Ut convallis tristique volutpat. Integer mi est, luctus vel dapibus vitae, vestibulum eget libero. Duis sed condimentum massa. Donec malesuada, augue eget rutrum luctus, arcu odio congue ex, eu finibus justo lectus in diam.
Accordion - UoL Accent Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae nisi felis. Sed imperdiet, nulla eget sagittis suscipit, tortor justo iaculis ex, vitae aliquet magna augue quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer vulputate euismod orci, placerat pretium justo egestas ac. Cras tellus augue, ornare vel magna non, imperdiet laoreet libero. Morbi quis sagittis mauris. In id nisl sit amet turpis consectetur pretium. Proin sed ante venenatis, mattis orci eget, iaculis purus. Donec in leo pretium, posuere augue at, fringilla mi. Donec mattis libero tortor, id ornare purus scelerisque ac. Mauris eu nunc magna. Maecenas ut congue purus, non blandit mi. Ut eu tellus bibendum, laoreet neque quis, semper leo.
Morbi fringilla dignissim laoreet. Nunc feugiat tincidunt sapien a pretium. Proin malesuada viverra tempus. Etiam dictum elementum malesuada. Integer ultricies tortor sit amet orci imperdiet, non feugiat ipsum tempus. Sed dignissim lacinia sagittis. Maecenas mollis lorem imperdiet aliquam scelerisque. Nullam bibendum fermentum luctus. Vivamus luctus porta ligula, a facilisis sem aliquam in. Praesent dignissim euismod nunc, id sollicitudin ante malesuada at. Phasellus risus quam, rutrum ut neque id, mattis interdum libero. Ut convallis tristique volutpat. Integer mi est, luctus vel dapibus vitae, vestibulum eget libero. Duis sed condimentum massa. Donec malesuada, augue eget rutrum luctus, arcu odio congue ex, eu finibus justo lectus in diam.
Accordion - Bootstrap Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae nisi felis. Sed imperdiet, nulla eget sagittis suscipit, tortor justo iaculis ex, vitae aliquet magna augue quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer vulputate euismod orci, placerat pretium justo egestas ac. Cras tellus augue, ornare vel magna non, imperdiet laoreet libero. Morbi quis sagittis mauris. In id nisl sit amet turpis consectetur pretium. Proin sed ante venenatis, mattis orci eget, iaculis purus. Donec in leo pretium, posuere augue at, fringilla mi. Donec mattis libero tortor, id ornare purus scelerisque ac. Mauris eu nunc magna. Maecenas ut congue purus, non blandit mi. Ut eu tellus bibendum, laoreet neque quis, semper leo.
Morbi fringilla dignissim laoreet. Nunc feugiat tincidunt sapien a pretium. Proin malesuada viverra tempus. Etiam dictum elementum malesuada. Integer ultricies tortor sit amet orci imperdiet, non feugiat ipsum tempus. Sed dignissim lacinia sagittis. Maecenas mollis lorem imperdiet aliquam scelerisque. Nullam bibendum fermentum luctus. Vivamus luctus porta ligula, a facilisis sem aliquam in. Praesent dignissim euismod nunc, id sollicitudin ante malesuada at. Phasellus risus quam, rutrum ut neque id, mattis interdum libero. Ut convallis tristique volutpat. Integer mi est, luctus vel dapibus vitae, vestibulum eget libero. Duis sed condimentum massa. Donec malesuada, augue eget rutrum luctus, arcu odio congue ex, eu finibus justo lectus in diam.
Instructions
Adding Content Types
- After you have chosen a website section to update make sure you are viewing the Content tab
- Under Content in this section select the green Add content button
- Select the content type you wish to use from the list or alternatively you can type the name of the content type into the Filter search box
- Click on the name of the content type to add it into the section
- Enter a name for the content type. This will not be displayed on the published page. It will only be visible as a name for the content type within Terminal four CMS for your reference
- Proceed to fill in all of the fields in the content type. The * next to an element identifies that the element is required.
- Once you have completed all of the required fields click the Save changes button to save your content type as a draft
- When you are ready to publish your content types make sure you ‘save and approve’ any changes. You can also approve a content type using the blue Actions drop-down button and then clicking Approve.
If you are unable to see or add a specific content type it may need to be enabled in your branch / section. Please email webteam@lincoln.ac.uk for support.
Content Type Elements
| Name | Description | Max Size | Required? |
|---|---|---|---|
| Accordion Title | The text used in the title/question of the Accordion item | 160 | Yes |
| Accordion Content | HTML content of the Accordion Item | 10000 | Yes |
| Background Colour | Sets block colour for the accordions (if required). This will be overriden if 'Make background full-width grey?' is ticked | 80 | |
| Make background full-width grey? | This will override 'Background Colour' and will put a full width grey colour over the accordion | 80 |