{"id":986,"date":"2025-07-29T11:06:19","date_gmt":"2025-07-29T15:06:19","guid":{"rendered":"https:\/\/brand.utk.edu\/web-design-system\/?page_id=986"},"modified":"2025-08-14T10:21:26","modified_gmt":"2025-08-14T14:21:26","slug":"layout-landing-page","status":"publish","type":"page","link":"https:\/\/brand.utk.edu\/web-design-system\/layout-landing-page\/","title":{"rendered":"Layout: Landing Page"},"content":{"rendered":"\n
\n
\n
\n

Heading<\/h2>\n\n\n\n

The Text with CTA & media pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.<\/p>\n\n\n\n

CTA Link<\/a><\/p>\n<\/div>\n\n\n\n

\n
\"image<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Stack 3up light gray<\/h2>\n\n\n\n
\n
\n
\"image<\/figure>\n\n\n\n
\n

Heading<\/h3>\n\n\n\n

Stack Cards can be used to set important information apart from the rest of the page and collect links related to a single subject.<\/p>\n\n\n\n

Single Link<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"image<\/figure>\n\n\n\n
\n

Heading<\/h3>\n\n\n\n

Stack Cards can be used to set important information apart from the rest of the page and collect links related to a single subject.<\/p>\n\n\n\n

Single Link<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"image<\/figure>\n\n\n\n
\n

Heading<\/h3>\n\n\n\n

Stack Cards can be used to set important information apart from the rest of the page and collect links related to a single subject.<\/p>\n\n\n\n

Single Link<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Heading for a Billboard<\/h2>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n

A full-width block of text with backgrounds that can be used to break up the layout for a call-to-action, to route users toward another topic, or call attention to an important message. For the heading, use short words and up to 3 lines of text at desktop size.<\/p>\n\n\n\n

CTA Link<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Heading<\/h2>\n\n\n\n

The Text with CTA & media pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.<\/p>\n\n\n\n

CTA Link<\/a><\/p>\n<\/div>\n\n\n\n

\n
\"image<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Points of Pride<\/h2>\n\n\n\n
\n
\n

Big text,<\/p>\n\n\n\n

medium<\/em> text,<\/p>\n\n\n\n

and small text<\/strong> can be used in any combo \u2014 choose what fits your content best.<\/p>\n<\/div>\n\n\n\n

\n

Duplicate a column to reuse its text styles<\/p>\n\n\n\n

With the List View toolbar<\/a> open, click the 3 dots beside the column whose styles you want and choose “Duplicate.”<\/p>\n<\/div>\n\n\n\n

\n

8\u201310<\/p>\n\n\n\n

is the maximum number of characters you should use in the big text<\/strong> field. Try to reserve that for numerals and symbols.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

1\u20134<\/p>\n\n\n\n

columns<\/p>\n\n\n\n

Delete any you don’t need via the Column’s 3-dots menu in the List View<\/a> toolbar.<\/p>\n<\/div>\n\n\n\n

\n

$##<\/p>\n\n\n\n

For small text<\/strong>, use no more than 15 to 20 words. Sentence fragments are OK. Link to source data<\/a> where possible.<\/p>\n<\/div>\n\n\n\n

\n

Skip the big text field and use just medium text alone<\/p>\n\n\n\n

when you don’t have a numeral or your stat is too long for the big text to fit on one line.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Posts 3up white<\/h2>\n\n\n\n