Components

Use Components to make your content sing...

 

Buttons

General Button & Pseudo Button

Use of one of these buttons for all general button usage.

Buttons for Dark Mode

Pseudo Buttons

Pseudo buttons are handy in situation where you don’t want to apply as much emphasis as a regular button would, but you need it to stand out more than just a link. Pseudo buttons apply a colored button look only when the mouse hovers over them, otherwise it looks like a link.

Marketing Buttons (Reserved for Special Use Cases)

These buttons are reserved for very special cases. It’s recommended you only use these button on links that are accomplishing a very important goal, such as applying for admission, filling out an important and necessary form, etc. Special buttons are specifically for Marketing / Calls-to-Action (CTA's)

Cards

(shown in a 4-Column Grid Snippet)

image for White Background Card

White Background Card

The Default Look
By default, a card will have a white background, as shown here in this card. It’s a good default look boasting high contrast and easy legibility.
Link Test
image for Blue Background Card

Blue Background Card

ETSU Blue
A Blue Card looks like this, with ETSU Blue as the background color. A great option to have in your toolkit.
Link Test
image for Gold Background Card

Gold Background Card

ETSU Gold
A Gold Card looks like this, with ETSU Gold as the background color. Another great option to have in your toolkit.
Link Test
image for Transparent Background Card

Transparent Background Card

Sometimes You Need Transparency
A Transparent Card looks like this, and doesn’t have a background color set. Instead, the background of its container element will show through.
Link Test

Additional Card Options

(shown in a 3-Column Grid Snippet)

image for Add a Mountain Shape

Add a Mountain Shape

Add a Mountainous Edge
You can add a mountain-shaped mask to any card’s image. Simply choose "Mountain Shape" to do so. Add the effect to any card color.
Link Test
image for Add Mountains

Add Mountains

A Site within a Site
You can add the Blue Ridge Mountains graphic used in the site footer to any card — it’s like a little micro-site!
Link Test
image for Add a Arrow

Add a Arrow

Point the Way
You can add a centered down arrow over the image as well — add it to any card color you like.
Link Test

 

image for Creative Refresh

Creative Refresh

Check out all the features of the creative refresh

 

 

You can put your cards in grids to place them side by side, float the card to wrap around content, or place the card full width of the page. The card image sizes are 600x315 except when building a full width card then you will need to use the 1200x630 size image.

 

 

 

 

 

image for Full Width

Full Width

Check out the full-width card....
Learn More About Cards

Presentation Element
Floated Image and Caption

Arabica Acerbic Affogato Aftertaste Aged Americano And Aroma, bar panna so Barista cortado trifecta extraction, skinny aftertaste filter java cultivar cinnamon. Mazagran trade Barista french and Acerbic acerbic Aged milk cinnamon origin carajillo, mountain coffee roast mug wings Bar single viennese pumpkin go pot, dripper crema flavour mocha At bar sit medium au breve. Espresso Brewed Blue iced Americano robust whipped, bar percolator grounds go saucer robusta, Au shop Affogato Bar aged coffee, Barista blue strong origin aftertaste. Blue skinny coffee breve Brewed acerbic, siphon steamed And foam, qui Arabica ut latte. Go brewed At aftertaste sweet cinnamon caffeine rich strong caramelization Aftertaste, Body roast body frappuccino Beans extraction sit americano Aroma. Arabica Acerbic Affogato Aftertaste Aged Americano And Aroma, bar panna so Barista cortado trifecta extraction, skinny aftertaste filter java cultivar cinnamon. Blue skinny coffee breve Brewed acerbic, siphon steamed And foam, qui Arabica ut latte. Go brewed At aftertaste sweet cinnamon caffeine rich strong caramelization.

FAQ Accordion (Single, Q&A)

For Single-Use FAQ Only…
Do not use for multiple FAQ / Q&A type listings, If you have multiple listings, use the FAQ Accordions Snippet.

  • How Can I Find Information About ETSU
    You can find information about all ETSU has to offer by going to our website: https://www.etsu.edu

Quote with Author and Citation

The WYSIWIG Editor already has two quote options, but neither offer the ability to list the author nor cite the source in a semantic, machine-readable manner. Use the Quote with Author & Cite component to enable this ability in your quotes. 

The whole secret of a successful life is to find out what is one’s destiny to do, and then do it.

Henry Ford wikipedia/henry-ford

Below is an example of the WYSIWIG Editor version of the block quote as a comparison to the Quote with Author Citation component above.

WSYWIG Editor Block Quote

Testimonial with Image and Speech Bubble

Photo of Vicki Hise
As a full-time ETSU employee who also has a family – a husband and 7 kids – it allowed me the opportunity to finish my degree that I started almost 30 years ago. The flexibility if offered worked well with my schedule. I would not have been able to obtain my degree any other way so I am grateful for this program. I would high recommend it to anyone!
Vicki HiseETSU Online Graduate

 

Responsive YouTube Video Embeds

Full-Width Section Breakout Section

Full-Width Sections "breakout" of the page's content container to go edge-to-edge, taking up the full-width of the page.

Use with Caution on Interior Pages
  • These only work on interior pages in the "Bottom Row" section — otherwise they’d overlap interior page sidebar navigation. As such, use with caution on interior pages, and only in the bottom row section.
  • you cannot place a breakout inside of a grid
  • breakouts contain 1,2,3 or 4 column grids by default

Example Full–Width Area with an image background + blue overlay & angles

Column 1 Content Example

Here's some text for column 1 to get an idea of what text looks like here. Remember, less is more.

Here's what a link will look like + bold.
Column 2 Content Example

You can place a 1, 2, 3, or 4-Column Grid in these full-width breakout areas.

Images too!
ETSU Shield Logo


Full-Blown, Maxed-Out Full-Width Breakout Area Demos above and below

Gold Example with 3-Column Grid

You have freedom here.
The only guide is your heart. We start with a vision in our heart, and we put it on canvas. Let's make a happy little mountain now. This is your world, whatever makes you happy you can put in it. Go crazy. There we are. We tell people sometimes: we're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted.
The Sky’s the Limit
You can spend all day playing with mountains. If you don't think every day is a good day - try missing a few. You'll see. I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent Red, and a little bit of Prussian Blue. It's amazing what you can do with a little love in your heart.
What Will You Create?
And I know you're saying, 'Oh Bob, you've done it this time.' And you may be right. Nice little fluffy clouds laying around in the sky being lazy. It's hard to see things when you're too close. Take a step back and look.

There’s lots of color options available for Full-Width Breakout Area using ETSU’s official colors. Examples below illustrate the possibilities:

Blue Color Block (Default)

Gold Color Block

Dark Green Color Block

Dark Gray Color Block

Light Gray Color Block

A variety of angles can be applied as well…

Angles Left to Right on Top & Bottom

Angles Right to Left on Top & Bottom

You can even apply an Appalachia Mountain silhouette shape..

Mountains Top & Bottom

Here's what a link looks like





The more content you put into these (thereby increasing the height) the bigger the mountains get.

Mountains on Top Only

Mountains on Bottom Only

 You can also add background images with color overlays for a unique texture with parallax scrolling effect...

Note that the most important thing is the text has a high contrast ratio and remains legible. It's too easy for some text to get lost overtop of an image due to image colors being unpredictable. Therefore, all Full-Width Breakouts with a background image are required to have a color overlay that colorizes the image to ensure the text is always legible.

With Background Image & ETSU Blue Color Overlay (Default)

Gold Overlay

Green Overlay

Heavy Gray Overlay

Pale Gray Overlay

All Full-Width Breakouts can have an overarching headline, along with 1,2,3 or 4 columns of content...

Here’s the Overarching Headline + 4-Column Grid

Column 1
of the 4-Column Grid
Column 2
of the 4-Column Grid
Column 3
of the 4-Column Grid
Column 4
of the 4-Column Grid

Headline + 3-Column Grid Example

Column 1
of the 3-Column Grid
Column 2
of the 3-Column Grid
Column 3
of the 3-Column Grid

Headline + 2-Column Grid Example

Column 1
of the 2-Column Grid
Column 2
of the 2-Column Grid

Headline + 1-Column Grid Example

Column 1
of the 1-Column Grid

 

Linked Area at page end

˜ The End ˜

 

Share