Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Information Boxes
Displays a responsive collection of information boxes with optional section heading and introductory text.
Content Type Details
- ID: 337
- Name: Information Boxes
- Minimum user level: Contributor
- Compatible with page layouts: Full Width, Homepage (Homepage Content child section)
Guidance
- Section Title: The title is optional. When a section title is provided, it displays as an H2 and individual box headings display as H3. When the title is omitted, individual box headings display as H2. Only omit the title when the boxes belong directly beneath the page's H1 heading.
- Content Formatting: Use the HTML editor to format paragraphs, bulleted lists, numbered lists, and hyperlinks. Avoid manually applying custom fonts, colors, or other styles. Standard website formatting is applied automatically.
- Content Length: Boxes expand to accommodate their content. Keep information concise and organized where possible, particularly when displaying lengthy lists of dates or deadlines.
- Responsive Layout: Boxes display in three columns on desktop, two columns on tablet, and one column on mobile. Additional boxes automatically wrap to new rows.
Content Type Elements Details
| Name | Description | Size | Type | Required | Conditionally Shown |
|---|---|---|---|---|---|
| Name | Internal name used to identify this section in Terminalfour. Not displayed on the website. | 100 Characters | Plain Text | Yes | No |
| Show Title | Check to enable optional title and description above the boxes. Choose from options: Yes | N/A | Check Box (List: Yes) | No | No |
| Title | Optional heading displayed above the information boxes. | 150 Characters | Plain Text | No | Yes |
| Description | Optional introductory text displayed above the information boxes. Use this field to provide context or instructions for visitors. See WYSIWYG content options. | 2000 Characters | HTML | No | Yes |
| Boxes | Add information boxes containing headings and formatted content. You can add, remove, and reorder boxes as needed. The layout automatically adjusts for desktop, tablet, and mobile devices. | N/A | Repeater (1-100 Information Box) | Yes | No |
Information Box
Reusable information box supporting formatted content, optional media, statistics, and links.
- Minimum : 1
- Maximum : 100
Content Type Elements Details
| Name | Description | Size | Type | Required | Conditionally Shown |
|---|---|---|---|---|---|
| Name | The Name element | 100 Characters | Plain Text | Yes | No |
| Heading | Enter a short, descriptive heading for this box. | 100 Characters | Plain Text | Yes | No |
| Content | Enter the main content for this box. You can include paragraphs, bulleted or numbered lists, bold text, and links. Use the editor's formatting tools rather than pasting styled HTML. See WYSIWYG content options. | 20000 Characters | HTML | Yes | No |
Example
Information Boxes Example
This example demonstrates how Information Boxes can organize different types of content using headings, paragraphs, bulleted lists, and hyperlinks. Each box adjusts automatically to accommodate its content.
Consectetur Adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
- Lorem Ipsum: Dolor sit amet, consectetur adipiscing elit.
- Sed Do Eiusmod: Tempor incididunt ut labore et dolore magna aliqua.
- Ut Enim: Ad minim veniam, quis nostrud exercitation ullamco.
- Duis Aute: Irure dolor in reprehenderit in voluptate velit esse.
- Excepteur Sint: Occaecat cupidatat non proident.
Tempor Incididunt
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Additional Information
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt.
- Ut labore et dolore magna aliqua.
For additional information, visit the HCC website.