Primary Hero (H1)
Secondary Hero (H1)
Secondary hero is used as the page title for secondary landing pages.
Tertiary Hero
Tertiary hero is used as the page title for tertiary landing pages.
Two Columns Link List w/Copy & Images (Left Column)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sapien felis. In et gravida felis. Sed odio velit, pulvinar a cursus vitae, tempor eu mi. Nulla eu pulvinar metus. Morbi turpis velit.
Two Columns Link List w/Copy & Images (Right Column)
Suspendisse in ullamcorper urna, non malesuada erat. Mauris vitae risus at justo lobortis sagittis ac quis lorem.
Equal Column Layout Example
The left column can contain a header copy and an optional button. Think of this section as an overview of the entire block. If not using a the header and copy and button block, you can add the call to action. The right column can contain a sub-listings grid or a call to action.
Item Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Item Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Item Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Item Title 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Equal Column Layout Example 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore
Right Column CTA Heading (Required)
Rich column cta copy optional, lorem ipsum dolor.
Equal Columns w/ Limited Flexibility Block
This block below represents the Equal Columns w/ Limited Flexibility Block.
Left Column CTA Heading (Required)
Mauris enim lectus, auctor sed pretium eu, finibus at sem. Morbi non turpis hendrerit, vulputate lorem sit amet, fringilla nibh.
Right Column CTA Heading (Required)
Sed vitae dui tortor. Mauris sagittis sem velit, sit amet semper ligula vulputate ac.
Column Content w/ An Aside
This block uses two columns to display main content and an aside. Both columns have a specific list of other content blocks to be used within them. You can move the added content blocks around for added flexibilty. Use the spacer block to add margins between content.
The main column can use:
- Simple Copy
- Blockquote
- Spacer
- Bulleted List (this example)
- Single Button
Simple Copy Heading (Optional)
Simple copy text area. Required. Curabitur in purus convallis, volutpat lacus eu, consequat tortor. Nullam ultrices, nisi id consequat placerat, purus arcu fermentum erat, quis mattis odio mi id turpis. In sodales arcu vel dui pharetra, eget tincidunt dolor mattis.
Blockquote Heading (Optional)
Blockquote Quote (Required). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sapien felis. In et gravida felis. Sed odio velit, pulvinar a cursus vitae, tempor eu mi. Nulla eu pulvinar metus.
Aside – contents may include:
- Bulleted List (this example)
- Single Button
- Button Group
- Resources
Resources
This is a Blockquote (Large) component. It spans the width of the page and includes optional citation.
Video Embed w/ Poster
Courtesy of YouTubePresenting Sponsor
Optional Text Area: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Student Porgrams Sponosred By
The ETHS education department has been awarded funding for the 2022-2023 fiscal year through the Arts and Culture Alliance American Rescue Plan (ARP) Renewal Grant. The Arts and Culture Alliance manages this grant program on behalf of Knox County and the U.S. Department of the Treasury. Funds support our programming efforts to combat the impact of lost instructional time for school children using evidence-based programs and services.
Main Content Copy (H4 optional)
This is a main content copy block with an optional eyebrow, heading and credit. This block displays a simple text on the page.
Morbi pretium faucibus lacus non tincidunt. Sed in eros eu lectus congue laoreet ac eget libero. In vitae elit in dolor condimentum fermentum ut eu est. Quisque nulla augue, congue at leo in, blandit maximus magna. Sed vitae facilisis elit. Duis laoreet a lacus vitae blandit. Aliquam aliquet nulla eu dui pellentesque, ultrices tempor metus porttitor. Suspendisse in ullamcorper urna, non malesuada erat. Mauris vitae risus at justo lobortis sagittis ac quis lorem.
Proin hendrerit quis orci vel molestie. Aliquam erat volutpat. Aenean non viverra sapien, in vulputate mi. Praesent dictum sit amet diam a congue. Sed pellentesque nisi nulla, vitae rhoncus tortor egestas vitae. Quisque maximus mi non arcu consequat finibus. Integer in auctor nisi. Nam tempus efficitur quam, non porta ipsum molestie quis.
Single Block Promo (H2 Required)
This is a two column block with a clickable image in the left column and a text block in the right column with optional eyebrow and copy. Heading is required.
Alt Single Block Promo (H2 Required)
If you do not add a link, this block can just become an image and copy block.
→
Example of a SIX Card Grid
The image widths and heights are set and are always the same, the image you chose will fit inside.
→
Title of the Second Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Title of the Third Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Fourth Card Title
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Card Number 5 Title
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Final Card Title
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Example of a FIVE Card Grid
The image widths and heights are set and are always the same, the image you chose will fit inside.
→
Title of the Second Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Title of the Third Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Fourth Card Title
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Card Number 5 Title
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Example of a FOUR Card Grid
The image widths and heights are set and are always the same, the image you chose will fit inside.
→
Title of the Second Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Title of the Third Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Fourth Card Title
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Example of a THREE Card Grid
The image widths and heights are set and are always the same, the image you chose will fit inside.
→
Title of the Second Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
→
Title of the Third Card
Duis aute irure dolor in reprehenderit in voluptate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.