Skip to content

Programmatic Facts

A row-level component used for displaying a few important facts and values. The fact boxes use flexbox to automatically rearrange themselves as needed no matter what size their container is.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
    1. What is the purpose of this component?
    2. Copy - Fixed
    3. Duration
    4. Cost
    5. Total Credits
    6. CTA Buttons
  3. Copy - Variable
    1. Program Benefits
    2. Additional Quick Facts
    3. Limited Time Offers
    4. Primary Value Props
  4. WordPress
  5. Specifications
    1. Properties
    2. Styling
      1. Custom Properties
  6. Changelog
  7. Related
    1. Contains
  8. Examples

Anatomy

  1. Facts
  2. Heading (optional)
  3. Content
  4. Actions

Usage Guidelines

What is the purpose of this component?

Strategic Objective: Create an area of the website to message standard facts that are relevant to all programs while still offer some variability to highlight core value propositions in the top portion of the page.

Copy - Fixed

The boxes are reserved to message duration, cost, and total credits. These are fixed and not variable given the role this information plays in our enterprise content strategy.

Duration

  • Can be expressed in either months or years. When deciding between the two, consider what has the perception of a shorter duration (i.e., 12 months vs. 1 year)

  • Should feature the shortest amount of time a student can realistically complete the program. Cannot accommodate ranges (i.e. 2-4 years)

Cost

  • Can be expressed as total tuition or cost-per-credit
  • Must be a numeric number input.
  • Cannot accommodate expository or explanatory text/copy. (i.e., $500 not including fees)
  • Cannot accommodate numeric ranges. (i.e., $500 - $535 or $57,000 - $60,000)

Total Credits

  • Must be a numeric number input not to exceed three numeric characters
  • Cannot accommodate numeric ranges. (32 - 36)

CTA Buttons

  • Request Information - uses primary or primary inverse button style

  • FAQs - typically uses secondary or secondary-inverse Button style

Copy - Variable

Program Benefits

This is an open ended copy block. These bullets are variable and can be tailored to the specific brand and/or brand. Here are some proposed options and use cases.

Additional Quick Facts

  • No GRE/GMAT

  • Next start 08/21

  • Applications due 08/21

  • AACSB-accredited

  • 3 concentrations available

Limited Time Offers

  • No app fee

  • Scholarships available

Primary Value Props

The program positioning narrative features a section entitled Program DNA. This cites the top three most prominent value statements related to the program. A truncated version (or teaser) of those statements could be suitable here.

  • Be mindful of character count. Less is more to retain the design aesthetic of the component. Each bullet should be ~ 60-65 characters (including spaces) and the entire real estate (all bullets considered) should not exceed 200 characters (including spaces)

WordPress

This component can be added to post content with the Programmatic Facts or Program Tabs blocks in the Gutenberg editor. To adjust the label of the facts that are output, go to Theme Settings → Block Settings.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
headingstring Text for heading in right column No-
contentstring inner HTML markup Yes-
factsarray Facts for left column Yes-
└ itemobject - --
└ labelstring - Yes-
└ valuestring - Yes-
actionsarray list of button objects Yes-
└ itemobject - --
numbers_classstring list of additional classes to apply to the numbers list container element No-
classstring list of additional classes to apply to main element No-

Styling

Custom Properties

NameDefaultResetsDescription
--tux-comp-programmatic-facts--number-bg-colorvar(--tux-theme--shade-color, rgba(0, 0, 0, 0.1))No-
--tux-comp-programmatic-facts--number-text-colorinheritNo-

Changelog

6.15.2 (2024-08-29)

  • fix: use correct field for tuition rate in block (#639) (6b3effc)

6.14.1 (2024-08-14)

  • fix: add uniform margin-bottom to list items (#622) (ad31881)

6.8.2 (2024-04-02)

  • fix: remove conflicting margin styles from button group (#560) (e7a7e02)

6.4.0 (2023-11-27)

  • feat: add toggle for rfi and faq buttons (#512) (fb3de6a)

1.26.0 (2021-10-22)

  • fix: add custom properties for number colors (a30feb3)

1.8.0

  • programmatic-facts added

Contains

Other core components embedded within this template.

Examples

Default

  • Duration 24 months
  • Cost per credit $500
  • Credits 123

Program Benefits

  • List item 1
  • List item 2
  • List item 3
{{ include( 'components/programmatic-facts.twig', {
	facts: {...}
	heading: "Program Benefits"
	content: "<ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul>"
	actions: {...}
} ) }}