LP6 Style Guide: Panes page Template = lp6-docs

Primary Pane Style

Next: Secondary Pane ›

Note: Panes interact with Flexbox styles. This allows for completely custom breakpoints on the fly.

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

					
	<ul class="flex flex-panes primary one two-500 four-1200">
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Heading</h3>
				<div class="pane-body">
					<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Body</h3>
				<div class="pane-body">
					<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Button</h3>
				<div class="pane-body">
					<p>Footers are optional and can include a button or button group.</p>
				</div>
				<div class="pane-footer">
					<a class="button button-primary">Optional Footer Button</a>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Text</h3>
				<div class="pane-body">
					<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
				</div>
				<div class="pane-footer">
					<p>*Optional Footer Paragraph</p>
				</div>
			</div>
		</li>
	</ul>

Note: Flexbox styles here are for demo purposes only. Try your own!

Secondary Pane Style

‹ Previous: Primary Pane | Next: Tertiary Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

					
	<ul class="flex flex-panes secondary one two-500 four-1200">
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Heading</h3>
				<div class="pane-body">
					<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Body</h3>
				<div class="pane-body">
					<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Button</h3>
				<div class="pane-body">
					<p>Footers are optional and can include a button or button group.</p>
				</div>
				<div class="pane-footer">
					<a class="button button-primary">Optional Footer Button</a>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Text</h3>
				<div class="pane-body">
					<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
				</div>
				<div class="pane-footer">
					<p>*Optional Footer Paragraph</p>
				</div>
			</div>
		</li>
	</ul>

Tertiary Pane Style

‹ Previous: Secondary Pane | Next: Dark Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

					
	<ul class="flex flex-panes tertiary one two-500 four-1200">
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Heading</h3>
				<div class="pane-body">
					<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Body</h3>
				<div class="pane-body">
					<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Button</h3>
				<div class="pane-body">
					<p>Footers are optional and can include a button or button group.</p>
				</div>
				<div class="pane-footer">
					<a class="button button-primary">Optional Footer Button</a>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Text</h3>
				<div class="pane-body">
					<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
				</div>
				<div class="pane-footer">
					<p>*Optional Footer Paragraph</p>
				</div>
			</div>
		</li>
	</ul>

Dark Pane Style

‹ Previous: Tertiary Pane | Next: Medium Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

					
	<ul class="flex flex-panes dark one two-500 four-1200">
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Heading</h3>
				<div class="pane-body">
					<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Body</h3>
				<div class="pane-body">
					<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Button</h3>
				<div class="pane-body">
					<p>Footers are optional and can include a button or button group.</p>
				</div>
				<div class="pane-footer">
					<a class="button button-primary">Optional Footer Button</a>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Footer Text</h3>
				<div class="pane-body">
					<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
				</div>
				<div class="pane-footer">
					<p>*Optional Footer Paragraph</p>
				</div>
			</div>
		</li>
	</ul>

Medium Pane Style

‹ Previous: Dark Pane | Next: Light Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

						
		<ul class="flex flex-panes medium one two-500 four-1200">
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Heading</h3>
					<div class="pane-body">
						<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Body</h3>
					<div class="pane-body">
						<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Button</h3>
					<div class="pane-body">
						<p>Footers are optional and can include a button or button group.</p>
					</div>
					<div class="pane-footer">
						<a class="button button-primary">Optional Footer Button</a>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Text</h3>
					<div class="pane-body">
						<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
					</div>
					<div class="pane-footer">
						<p>*Optional Footer Paragraph</p>
					</div>
				</div>
			</li>
		</ul>

Light Pane Style

‹ Previous: Medium Pane | Next: Steam Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

						
		<ul class="flex flex-panes light one two-500 four-1200">
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Heading</h3>
					<div class="pane-body">
						<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Body</h3>
					<div class="pane-body">
						<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Button</h3>
					<div class="pane-body">
						<p>Footers are optional and can include a button or button group.</p>
					</div>
					<div class="pane-footer">
						<a class="button button-primary">Optional Footer Button</a>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Text</h3>
					<div class="pane-body">
						<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
					</div>
					<div class="pane-footer">
						<p>*Optional Footer Paragraph</p>
					</div>
				</div>
			</li>
		</ul>

Steam Pane Style

‹ Previous: Light Pane | Next: Fog Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

						
		<ul class="flex flex-panes steam one two-500 four-1200">
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Heading</h3>
					<div class="pane-body">
						<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Body</h3>
					<div class="pane-body">
						<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Button</h3>
					<div class="pane-body">
						<p>Footers are optional and can include a button or button group.</p>
					</div>
					<div class="pane-footer">
						<a class="button button-primary">Optional Footer Button</a>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Text</h3>
					<div class="pane-body">
						<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
					</div>
					<div class="pane-footer">
						<p>*Optional Footer Paragraph</p>
					</div>
				</div>
			</li>
		</ul>

Fog Pane Style

‹ Previous: Steam Pane | Next: Cloud Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

						
		<ul class="flex flex-panes fog one two-500 four-1200">
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Heading</h3>
					<div class="pane-body">
						<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Body</h3>
					<div class="pane-body">
						<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Button</h3>
					<div class="pane-body">
						<p>Footers are optional and can include a button or button group.</p>
					</div>
					<div class="pane-footer">
						<a class="button button-primary">Optional Footer Button</a>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Text</h3>
					<div class="pane-body">
						<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
					</div>
					<div class="pane-footer">
						<p>*Optional Footer Paragraph</p>
					</div>
				</div>
			</li>
		</ul>

Cloud Pane Style

‹ Previous: Fog Pane | Next: Creative Pane ›

  • Heading

    Pane headings can be any level heading, but are typically an h3.

  • Body

    Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.

  • Footer Button

    Footers are optional and can include a button or button group.

    Optional Footer Button

  • Footer Text

    Footers are optional and can include paragraphs such as disclaimers.*

    *Optional Footer Paragraph

HTML Code Snippet

						
		<ul class="flex flex-panes cloud one two-500 four-1200">
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Heading</h3>
					<div class="pane-body">
						<p>Pane headings can be any level heading, but are typically an <code class="inline-code">h3</code>.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Body</h3>
					<div class="pane-body">
						<p>Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, images, etc.</p>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Button</h3>
					<div class="pane-body">
						<p>Footers are optional and can include a button or button group.</p>
					</div>
					<div class="pane-footer">
						<a class="button button-primary">Optional Footer Button</a>
					</div>
				</div>
			</li>
			<li class="panes">
				<div class="pane">
					<h3 class="pane-heading">Footer Text</h3>
					<div class="pane-body">
						<p>Footers are optional and can include paragraphs such as disclaimers.*</p>
					</div>
					<div class="pane-footer">
						<p>*Optional Footer Paragraph</p>
					</div>
				</div>
			</li>
		</ul>

Creative's Pane Style

‹ Previous: Cloud Pane | Next: Usage ›

Degree at a Glance

See also, Fast Facts.

  • Accredited Statement

    Fast Fact Data

    Optional Footer

  • Number of Credits

    Fast Fact Data

    Optional Footer

  • Cost per Credit

    Fast Fact Data

    Optional Footer

  • 8-Week Program Format

    Fast Fact Data

    Optional Footer

HTML Code Snippet

						
	<ul class="flex flex-panes creative tertiary pane-single-color pane-text-black one two-500 four-1200">
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Accredited Statement</h3>
				<div class="pane-body">
					<p>Fast Fact Data</p>
				</div>
				<div class="pane-footer">
					<p>Optional Footer</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Number of Credits</h3>
				<div class="pane-body">
					<p>Fast Fact Data</p>
				</div>
				<div class="pane-footer">
					<p>Optional Footer</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">Cost per Credit</h3>
				<div class="pane-body">
					<p>Fast Fact Data</p>
				</div>
				<div class="pane-footer">
					<p>Optional Footer</p>
				</div>
			</div>
		</li>
		<li class="panes">
			<div class="pane">
				<h3 class="pane-heading">8 Week Program Format</h3>
				<div class="pane-body">
					<p>Fast Fact Data</p>
				</div>
				<div class="pane-footer">
					<p>Optional Footer</p>
				</div>
			</div>
		</li>
	</ul>

Usage

‹ Previous: Creative Pane | Next: Modifiers ›

General Guidance

Panes (or cards) are a UI design pattern that group related information in a flexible-size container visually resembling a playing card. Think of a pane as a container for a few short, related pieces of information. Panes group information and are also grouped together in flex grids.

Pane Content

A pane combines several different (but related) pieces of information into one cohesive unit of content. Use cases include press releases, programs, fast facts, etc. A single pane will typically include a few different elements, such as an image, a heading, a description, icons, or a call-to-action button. All content elements are related and create a cohesive unit: the pane.

  • Pane Image Above Pane Heading

    The pane body can use any content common html elements.

    Pane Footer buttons below a Pane Footer Paragraph.

    Apply Now Request Info

Pane Image

Pane images are always full-width and responsive. Ideally, pane images should be sized for a landscape aspect ratio. Pane images within a group context of related panes should always share a common aspect ratio and pixel dimensions.

Pane Heading

Pane headings can be any level heading, but are typically an h3. If you want the pane to exist outside the content hierarchy, the pane heading can also be a paragraph element. Panes in a group context should always share the same heading element.

Pane Body

Pane bodies can contain any common html element, including lists, paragraphs, hyperlinks, icons, etc. Remember that panes are intended for short blurbs of content. Brevity is the key to clear communication here.

Pane Footer

Pane Footers are optional and can include short paragraphs such as disclaimers or a CTA button or button group.

HTML Code Snippet

						
	<ul class="flex flex-panes primary one">
		<li class="panes">
			<div class="pane">
				<img class="pane-image" src="/common/images/background.jpg">
				<h3 class="pane-heading">Pane Image Above Pane Heading</h3>
				<div class="pane-body">
					<p>The pane body can use any content common html elements.</p>
				</div>
				<div class="pane-footer">
					<p>Pane Footer buttons above. Pane Footer Paragraph</p>
					<a class="button button-tertiary">Apply Now</a>
					<a class="button button-primary">Request Info</a>
				</div>
			</div>
		</li>
	</ul>

Modifiers

‹ Previous: Usage

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles.

Name Class Usage/Properties
Center Align Pane .pane-align-center text-align: center

Overrides default left aligned text with center alignment. This class can be applied to the .pane, .pane-heading or .pane-body elements depending on the desired alignment specificity.
Right Align Pane .pane-align-right text-align: right

Overrides default left aligned text with right alignment. This class can be applied to the .pane, .pane-heading or .pane-body elements depending on the desired alignment specificity.
Monochromatic Style .pane-monochromatic color: var(--); background-color: var(--);

Overrides default color schemes to make panes monochromatic. All colors used in the pane are tints of a brand or secondary color variable. This class is applied to the .flex-panes element.
Single Color Style .pane-single-color color: var(--); background-color: var(--);

Overrides default color schemes to make panes a single solid color. This class is applied to the .flex-panes element.
Pane Text Black .pane-text-black color: var(--color-sec-black);

Overrides default color schemes to make pane text black. This class is applied to the .flex-panes element.
Pane Text White .pane-text-white color: var(--color-sec-white);

Overrides default color schemes to make pane text black. This class is applied to the .flex-panes element.