Callout Styles

JamsEDU has been designed to facilitate rapid development and deployment of websites, especially for non-technical users. To accomplish that goal there are a few built in HTML elements you can use on pages. Please pay careful attention to the demo code below. If you are familiar with HTML you will notice that we do not always use standard HTML for some elements; don't worry, the HTML is converted to standards complaint HTML when loaded.

Quotes

Quotes can be added to pages using the standard HTML blockquote. If you would like to visually specify an author or source for your quote add the cite tag below your quote but inside the blockquote. Visual citations may be optional depending on how you referenced the quote but you should add a link to the original source using the cite attribute in the blockquote. See the simplified code example below:

If future generations are to remember us more with gratitude than sorrow, we must achieve more than just the miracles of technology. We must also leave them a glimpse of the world as it was created, not just as it looked when we got through with it
Lyndon B. Johnson

<blockquote cite="https://link-to-source.com">
    <p>
        Your quote here.
    </p>
    <cite>
        Author Here (Optional)
    </cite>
</blockquote>

Callouts

Callouts are used to call attention to some important information. They should be used when users need to pay careful attention to something. Simply add the class callout to any div and you will get the following generic callout:

Generic Callout:

Callouts are used to call attention to some important information. They should be used when users need to pay careful attention to something. Below is the HTML code for a generic callout.

<div class="callout">
    <h2>Generic Callout:</h2>
    <p>
        Your text here.
    </p>
</div>

JamsEDU also supports additional callouts that are each styled to grab your users attention in different ways. Below is a demonstration of these callouts. Simply add the appropriate class along with the callout class to a div. Please note we used heading tags (h2) to simplify the HTML for this demonstration. Every h2 could be replaced with this code instead: <div class="title">...</div>

Notice:

To display a callout box like this one add a div to your page with the class of callout notice.

Message:

To display a callout box like this one add a div to your page with the class of callout message.

Success:

To display a callout box like this one add a div to your page with the class of callout success.

Warning:

To display a callout box like this one add a div to your page with the class of callout warning.

Notice with Icon:

To display a callout box like this one add a div to your page with the class of callout notice notice-icon.

Message with Icon:

To display a callout box like this one add a div to your page with the class of callout message copyright-icon.

Success with Icon:

To display a callout box like this one add a div to your page with the class of callout success success-icon.

Warning with Icon:

To display a callout box like this one add a div to your page with the class of callout warning warning-icon.

Class names can be interchanged to create a custom callout with unique colors or icons. Here is one more example that uses the warning class with the copyright-icon class to highlight that something should be treated with a different license. Notice that we also omitted the heading.

The above or following content is licensed as _____ by _____. All rights are reserved. Used with permission. Used according to fair use for educational purposes.