This page explores the major elements we use for structuring and organizing a page.
Headings
Headings are the primary way to organize sections of content semantically. Well-written web content uses headings to break up the page into meaningful segments – topics and sub-topics – and create an information hierarchy.
Headings comprise h1, h2, h3, h4, h5, and h6. The JSOM template automatically creates an h1 using the page title in our content management system (CMS), and there should always be one and only one h1 on any page.
h1 is the main topic of the page. h2 elements (for example, “Headings” above) are the sub-topics of h1; h3 elements are the subtopics of h2; etc. Do not skip from h1 to h3, or h2 to h5, for example; headings must be nested logically and sequentially.
We frequently use h2 and h3 in page content, sometimes h4, and rarely h5 or h6, but they are available if needed. We use them for organizing the content structure, as in an outline, not for style; use CSS classes, strong, emphasis, or other methods to style text.
h1 and h2 are visible above. Below are the remaining heading tags and how they look in this template.
h3
h4
h5
h6
Heading Standards
Follow the two guidelines below to keep the capitalization of web headings consistent.
1. If the heading is not a complete sentence, capitalize major words of section headlines and do not include punctuation at the end.
The Title Capitalization Tool is a good resource for this, if you are unsure about how to capitalize a particular title. Just click the “AP” tab, as AP style is the JSOM standard.
- “Fall 2020 Class Schedule”
- “The MBA Designed With You in Mind”
- “Full-time MBA Students on Their Career Outcomes”
2. If the heading is a complete sentence, use normal sentence formatting – including capitalizing the first word and adding punctuation at the end.
- “What would you like to learn about next?”
- “Ready to start your application?”
- “We’d like to send you more details about the UT Dallas MBA programs.”
Blocks
Wideblock
While headings primarily organize sections of content semantically and hierarchically, blocks organize content visually. Adding a background color class to the element with class wideblock will change the background color of the element, which extends across the entire screen. See the available background color classes below.
Note that most wideblock elements also have the class overflow, which ensures that no floating content (such as photos) will extend past the bottom of the container. (Selling blocks do not use the overflow class, because the photo extends outside of the first wideblock element by design.)
Rule of Thumb for Wideblocks
Typically, each h2 element on the page is a good place to start a new wideblock.
Smallblock
Smallblock is similar to wideblock, but the left and right edges do not extend to the edges of the screen. Use smallblock to create smaller sections on a page, which can help with structure and visual organization.
Smallblock can also add emphasis to a piece of content on a page, such as alerts, warnings, reminders, features, and more.
If the smallblock needs to have a white background color, and the parent wideblock has a background color, you give the smallblock element the class white. Also, add the class inner to any smallblock inside a wideblock that has a background color. This ensures that the text inside the smallblock has the correct color.
Note that the text color changes depending on the background color of its parent.
Rule of Thumb for Smallblocks
Typically, each h3 element on the page is a good place to start a new smallblock.
Background color Classes for Blocks
warm-gray-0
warm-gray-0 and no background color class (or white if a parent element has a non-white background color) are the best two colors to alternate wideblock sections on a page. Text is very easy to ready on both colors because of sufficient contrast between background and text colors.
warm-gray-1
After warm-gray-0 and no background color (or white), this is the next best background color for a normal wideblock on a page.
warm-gray-2
Rarely used, but available.
warm-gray-8
Ideal for selling blocks.
warm-gray-10
Rarely used, because this is the footer color. But it is available.
white
Use white for a smaller element that is inside a larger element with a background color.
orange-light
This is the warning class. Use this color for critical information, such as deadlines or cancellations.
orange
Rarely used, but available. orange can add emphasis to a page, but it needs to be far away from the page header, which has the same background color.
green
Rarely used, but good for a call-to-action, statistic boxes or to add emphasis to a page.
green2
Used primarily at the top of a page for critical information for important announcements, but not as a warning, which orange-light is reserved for.
Selling Block
The selling block is a template piece that is important on top-level pages, such as the main landing page for an academic program. A selling block draws attention, uses a photo, makes a clear and strong value proposition, supports the proposition and uses a call-to-action to drive the user to more information.
See the selling block below.
Selling Blocks
Selling blocks have a colfloat element wrapped around the wideblock. They always have an h2, which is sized larger than the normal h2, and they sometimes include a support sentence in a sub-heading element directly below the h2.
This Is a Selling Block
Selling blocks include a nice, vertical photo on desktop, which changes to a horizontal version of the same photo on mobile. A picture element is required in order to serve different images depending on screen size. The two images are children elements of picture, and they need to follow the naming convention that states their width and height in pixels in the filename.
For the image to be on the right, use the classes right33, right45 or right25, depending on how the design looks. For the image to be on the left, use left33, left45 or left25.
Finally, because the image is large and floats, always put a clearfix element after the colfloat. clearfix makes sure that the next colfloat or wideblock does not touch the photo above it.
Since we’re selling, a call-to-action is usually presentContact Block
There are many potential ways to use the Selling Block layout, such as the Contact Block, which is the standard way to present contact information for a page. The blockquote element is optional and is often used for messages from the director of a program.
The BS in Accounting program at the Jindal School of Management is designed to prepare students for careers in public accounting, corporate accounting or government and not-for-profit organizations. The program provides a solid foundation of critical analytical skills, promotes ethical awareness, enhances communication and networking skills, and introduces regulatory compliance. Accounting is the language of business, and the program offers a well-balanced education that emphasizes fundamentals as well as practical application that will help you become a leader in the accounting profession.
Tiffany Bortz
Associate Area Coordinator | PPA Director, Undergraduate Accounting
Action Block
Action Blocks are similar to Selling Blocks, but usually have a shorter and more action-driven focus. For important actions such as learning about double degrees, getting admission information or starting an application, Action Blocks are very useful. We often repeat them throughout a website for consistency, and they often appear at the bottom of a page just above the footer.
Ready to start your application?
Before you apply, get familiar with the application process for Jindal School undergraduate programs at UT Dallas.
How to ApplyMore Ways to Display Contact Information
Below are two ways to display contact information or a members of a group in a more compact design.
Ask us anything!
Contact us if you have any questions about degree plans, course selection, course prerequisites, internships, community engagement, capstone or any other topic.
Navneet Bhatti
Academic Support Coordinator, Undergraduate Finance
Honorary Board Members
Charlie Chen
Chairman/CEO, DFW Technology, Inc.
Wilbur Gregory
Vice President, Chief Compliance Officer, NCH Corporation
Colgrid
Colgrids divide space into different widths, including 25%, 33%, 45%, 50%, 55% and 67%. Below are the various widths and combinations that the children of a colgrid element can take.
The “Inner” Class
As mentioned above, sometimes an element with a background color class is nested inside an element with a different background color class. In order for the text inside the inner element to have the correct color, you must add the class inner to the child element. See below.
left25
left25
left25
left25
left50
right50
left25
left25
right50
left50
Note that the configuration of this row doesn’t work responsively, so don’t use it.
left25
This warm-gray-2 element also has the inner class.
right25
But, this warm-gray-2 element does not have the inner class. Therefore the text is styled based on the orange class of the parent wideblock.
left33
left33
left33
left67
right33
left33
right67
left45
right55
left55
right45
fullwidth
Accordions
When you click an accordion label, the content displays. Clicking again hides the content.
Also, multiple accordions can be open at the same time.
You can have multiple accordion elements on a single page. For example, you may have different FAQ topics on a page, each topic having its own accordion element for FAQs related to that topic.
See the “FAQ” section on the Posts and Embedding Dynamic Content page .
Tables
Tables are a time-tested way to organize web page content, but they can present problems on mobile devices. The more columns a table has, the more likely it is to look bad on a mobile device. Columns may become so narrow that only a few words fit before the line breaks, or some content may not even appear on the page.
If a table has 2-4 columns, it will likely display well on both desktop and mobile. For tables with five or more columns, you may need to use colgrid or one of the modified table solutions below. But, first, let’s start with a simple table.
Please read the table requirements in the simple table below.
Simple Table
| Heading 1 | Heading 2 | Heading 3 | |||
|---|---|---|---|---|---|
| The headings above are <th> elements inside the first <tr> element. | The headings are required, and must contain the attribute scope=”col”. | To adjust the width of a column, add the width=”x%” attribute to the <th> element. | |||
| Do not use colspan. | Any empty cell (<td>) must contain . | Heading text should be short. | |||
| Check how the table looks on mobile to be sure that the design is successful. |
Comparison Table
Adding the class “dataTable” to the table element creates a table that is mobile-friendly and optimized for comparing the rows (or columns, on mobile) to one another. A comparison table lets the user scroll horizontally to compare columns, which is how this table solves the problem of successfully displaying its content on mobile devices.
| Category | Structure | Duration | Work Experience* | GMAT* | GRE* |
|---|---|---|---|---|---|
| Full-Time Program | Cohort: Daytime | 18 mos. | 5 yrs. | 650-700 | 310-320 |
| Executive Programs | Cohort: Weekend & Hybrid | 21 mos. | 8-10 yrs. (min) | n/a | n/a |
| PMBA Evening Cohort | Cohort: Evening | 24 mos. | 5-10 yrs. | 550-700 | 300-320 |
| PMBA Flex | Self-paced | 72 mos. (max) | 5-10 yrs. | 550-700 | 300-320 |
| PMBA Online | Self-paced | 72 mos. (max) | 5-10 yrs. | 550-700 | 300-320 |
*Average
Table with Colgrid
Mixing tables with colgrid elements allows for a clean, mobile-friendly layout. Use this format with simple class schedules, for example, with cohort programs.
| Course Title | SCH |
|---|---|
| ACCT 6301 Financial Accounting | 3 |
| OB 6301 Organizational Behavior | 3 |
| OPRE 6301 Statistics and Data Analysis | 3 |
| Total | 9 |
Table with css
For event schedules, you can use the presentation below, which looks like a table but does not use any table elements. Instead, it uses colgrid. The advantage of this format is that the information stacks nicely on mobile so that the content is useful to attendees before and during the event.
The left side of each row shows the time, date, and other logistical details. The right side shows specific information about the session at that time slot, such as the Title, speaker name, speaker bio, and description.
3:00 p.m. – 5:30 p.m.
DoubleTree Richardson
1981 North Central Expressway
Richardson, TX 75080
Conference Registration at DoubleTree Hotel Dallas-Richardson
5:00 p.m.
All buses depart for Gala Dinner (15 minute ride)
Bus 1 departing from DoubleTree Hotel Dallas-Richardson
Bus 2-4 departing from UT Dallas
5:30 p.m. – 6:30 p.m.
Slate Venue
2701 Custer Pkwy #905
Richardson, TX 75080
Cocktails and Networking
6:30 p.m. – 8:00 p.m.
7:45 p.m. – 8:00 p.m.