FLEX Page Documentation

What is FLEX?

“Flex” refers to the “Flexible Degree Service Bundle” that 2U/edX offers universities. This gives schools the opportunity to partner with 2U for certain services. At the base level, universities are provided core services from 2U – including program set up, basic marketing, student support, and the Learning Management System (LMS), etc. If partners would like more services than the “Core” offerings, they get to pick and choose their own level of additional services provided by 2U. This can be enhanced marketing, help with content/curriculum development, and/or career engagement networks – to name a few.

One thing specific to the Flex/core model is that Flex degrees do not have a full university branded website maintained by us at 2U. Instead of a full site with many pages, an enhanced “About page”-like page is hosted on the edX domain to gain organic leads that way. The edX engineers created the “Flex” template so we could host all necessary information on 1 single page (Admissions, Curriculum, Tuition, & Legal). 

How to Build a FLEX Page

Pro Tip: Try opening a live page in Contentful to mirror the page set up as you build a new page!

Here’s an example page of Cabrini MEd to see how the page looks live!
Here’s an example ticket from the Cabrini MEd launch.
Here’s a test page created by the edX engineers.
Here’s recorded training hosted by Mary that walks you through how to build a page!

Getting Started

  1. In your ticket you will find the URL, UUID, copy doc, and image assets.
    • Your google drive assets folder should include a hero image, university logo svg file (for the hero), and an image for the CTA (“Ready to learn?) section.
  2. Open up Contentful/Compose & sign in:  https://compose.contentful.com/ 

Page Creation

  1. Starting on the Compose main page, click “Create Page” in the top right corner and choose “FLEX Detail Page” as the page type.
  2. Enter the Internal Page name using the program abbreviation + the page title (h1 from the copy doc).
    • Example =  “[CAB-MED] The online MEd from Cabrini University”

Hero Section

Under the Hero section, click the + button and select “Product Detail Hero” under “New Content”

  1. Enter the internal name of “[PROG-ABBR] Hero”.
  2. Lead Form URL is blank
  3. Under Organization Logo, click the + button and select “Add New Media”. Upload the svg logo you downloaded from the assets folder.
    • Once uploaded, click on the logo and update the “Title”, which appears in the html of the page as the alternative text. Use the University name + logo. Example: “Cabrini University logo”
    • If you know you’ve already uploaded the logo for another page, you can instead click “Add existing Media”
  4. Enter the Subheading – this corresponds to the “description” in the copy doc directly under the h1.
  5. Text List is blank.
  6. Under Background Image, click the + button and select “Add New Media”. Upload the hero image you downloaded from the assets folder. 
  7. Under Factoids, click the + button and select “Factoid” under New content
    • For Internal name, enter “[PROG-ABBR] Factoid 1”
    • In the Heading field, add the bolded state from the copy doc
    • Label, Value, and Citation are left blank
    • In the Text field, enter the copy that is below the stat. Do NOT include any footnote number.
      • If your text has a footnote: within the text module, click the + Embed button > Inline Entry. Click the “Create new Footnote” button
      • Click the three dots next to Untitled with the red bar, and click Edit. A new window will open.
      • For Internal name, enter “[PROG-ABBR] Footnote #”
      • For Text, paste in the footnote citation copy from the copy doc. Links and formatting will carry over automatically. Delete any extra paragraphs that get pasted in.
      • Click “Publish” within the footnote module. You can then close this page.
    • Repeat steps above for additional Factoids (changing name to 2, 3 etc.).

SEO Section

In the SEO module section. Click the + button, then select New Content > SEO.

  1. Enter the Page title (h1 in copy doc) and page description (description in copy doc and same as Subheading from the hero section)
    • Set Language code to “en”. 
    • Leave ​​robots meta tag content + page image blank.

Taxi Form Section

In the Taxi Form section. Click the + button, then select “Taxi Form” under “New Content”

  1. Enter Form ID, Form grouping, Title, Subtitle, & Post-submit URL (aka thank you page)
    • For Title: “Get More Information”
    • For Summary: “Answer a few quick questions to get more information about the program.”
    • Form ID: 
    • Form Grouping: 

UUID Section

  1. Enter the UUID from the ticket.

Slug Override Section

  1. Enter the slug URL for the page.

Tab Sections

The design of the page includes different “tab” sections to switch between instead of one continuous page to scroll through. This is the main module of the page. They consist of Overview, Curriculum, Tuition and Financial Aid, Admissions, and Legal (not necessary for every flex program).

  1. For each Tab section, click the + button, then select “Tab Section” under “New Content”
  2. Enter the internal name of “[PROG-ABBR] Tab Title” (Tab Title = Overview, Curriculum, etc.)
  3. In the Title field, enter the tab title such as “Overview”
  4. In the Anchor ID field, add the tab title in all lowercase with dashes in between words when necessary. Example: ‘overview’ or ‘admissions’
  5. Under the Module section, you will build the specific tab section’s modules. These modules will only appear under their respective tabs. 

Overview Tab

About Section

For the About section, click the + button and select “About the Program Module” in the modules section.

  1. For Internal name, enter “[PROG-ABBR] About the Program”
  2. For Heading, check the copy doc to see if you will be using the default text (“About the program”), otherwise paste in the appropriate h2 value
  3. Under Checkmarked Items, click the + button and select new “Text List Module” – this is for the Value Props in the copy doc
    • For Internal name, enter “[PROG-ABBR] Value Props”
    • Keep the theme as background-white, and Header is left blank.
    • Under Text List Items, click + button and select New Text item module
      • For header, enter the bolded text (no emdash)
      • For description, enter the non-bolded text. Do not include the emdash or any footnotes
      • If you need to add a footnote, you can follow the steps noted above in the Hero section.
      • Repeat for additional value prop items.
  4. Scroll to the Content section, and paste in the h2 and content from the copy doc that is right after the value props. This is typically about the program.
    • Select the heading and change the text style from Normal Text to h2. 
    • Superscript, Lead Form URL are left blank. 
    • Display Checkmarked Items First should stay set to “yes”
CTA Section

For the CTA, click the + button and select “Media Module” in the modules section. If the CTA is the same across all of the tab sections, you can reuse the module across all tabs instead of creating it multiple times.

  1. For Internal name, enter “[PROG-ABBR] CTA Module”
  2. Enter the title, which is labeled as the h2 in the copy doc.
  3. For the title heading level, select “h2” unless otherwise specified in copy doc.
  4. For orientation, select “right”  –  this will make the image appear to the right of the text.
  5. Upload the image from the assets folder to media.
  6. Video url can be left blank
  7. Cta, cta2, cta3 are not currently necessary
  8. For “theme”, select background-light
  9. For “bodyRichText”, enter the sentence from the CTA section in copy doc
  10. For small image, select “No”
  11. For appearance, select “product-parallelogram” from the dropdown.
  12. For Flex Page CTA Button Text, enter “Request more info” 
Admissions Section

For the Admissions section of the Overview tab, click the + button and select “Statistic Icon Module” in the modules section.

  1. For Internal name, enter “[PROG-ABBR] Admissions”
  2. For Heading, enter “Admissions” or what is noted in the copy doc.
  3. Enter the paragraph text to the Body text section.
  4. For the Icon, click “Add existing media” and then search for “Calendar Icon”
  5. For Icon label, add “Application deadline”
  6. For the statistic, add the application deadline date from the copy doc.
  7. Under Tab Section CTA,  click the + button and select “Tab Section CTA”
    • For Internal name, enter “[PROG-ABBR] Application Requirements CTA”
    • For Label, enter “View admissions details”
    • For href, add “admissions” (the id created for the Admissions tab section)
Faculty Section

Not every Flex page will have a Faculty section.

For the Faculty section of the Overview tab, click the + button and select “Faculty Module” in the modules section.

  1. For Internal name, enter “[PROG-ABBR] Faculty”
  2. Under Faculty List,  click the + button and select “Faculty” to add a new faculty member
    1. Enter the name
    2. Enter the title
    3. Upload an image to the Portrait. Make sure the image is in circular shape.
  3. Repeat step 2 for the amount of faculty members.
Tuition Section

For the Tuition section of the Overview tab, click the + button and select “Statistic Icon Module” in the modules section.

  1. For Internal name, enter “[PROG-ABBR] Tuition and fees”
  2. For Heading, enter “Tuition & fees” or what is noted in the copy doc.
  3. Enter the paragraph text to the Body text section.
  4. For the Icon, click “Add existing media” and then search for “dollar-icon”
  5. For Icon label, add “Tuition”
  6. For the statistic, add the tuition price from the copy doc.
  7. Under Tab Section CTA,  click the + button and select “Tab Section CTA”
  1. For Internal name, enter “[PROG-ABBR] Tuition CTA”
  2. For Label, enter “View tuition details”
  3. For href, add “tuition” (the id created for the Tuition tab section)

Curriculum Tab

Curriculum Section

For the Curriculum section of the Curriculum tab, click the + button and select “Collapsible Text Tab Module” under “New Content”

  1. For Internal name, enter “[PROG-ABBR] Curriculum tab section”
  2. For Heading, add “Curriculum” or what is noted in the copy doc.
  3. Add the copy to the Content section and make sure it is formatted correctly (bullets, bold text, etc.)
  4. Skip the CTA field.
  5. Under the Items section, click the + button and select “FAQ”
    1. For Internal name, enter “[PROG-ABBR] Curriculum item 1”
    2. For question, enter the bolded text labeled as [H3-Accordion] in the copy doc.
    3. Add the course/curriculum description to the Answer Rich Text
    4. Skip Structured Data Placement
  6. Repeat the above for all items.
CTA Section

For the CTA section of the Curriculum tab, look to see if the CTA language & image is the same across all tabs. 

  • If it is the same, click the + button and select “Add existing content”. You can find the Media Module you created from the Overview section. 
  • If it is different, follow the “CTA Section” directions under the Overview tab.

Tuition and Financial Aid Tab

Tuition and Financial Aid Section

For the Tuition section of the Tuition tab, click the + button and select “Collapsible Text Tab Module” under “New Content”

  1. For Internal name, enter “[PROG-ABBR] Tuition and financial aid tab section”
  2. For Heading, enter “Tuition and financial aid” or what is noted in the copy doc.
  3. Add the copy to the Content section and make sure it is formatted correctly (bullets, bold text, etc.)
  4. Skip the CTA field.
  5. Skip the Intro Requirements Text field.
  6. Skip the items section (accordions).
CTA Section

For the CTA section of the Curriculum tab, look to see if the CTA language & image is the same across all tabs. 

  • If it is the same, click the + button and select “Add existing content”. You can add the Media Module you created from the Overview section.
  • If it is different, follow the “CTA Section” directions under the Overview tab.

Admissions tab

Admissions Section

For the Admissions section of the Admissions tab, click the + button and select “Collapsible Text Tab Module” under “New Content”

  1. For Internal name, enter “[PROG-ABBR] Admissions tab section”
  2. For Heading, add “Admissions” or what is noted in the copy doc.
  3. Add the copy to the Content section and make sure it is formatted correctly (bullets, bold text, etc.)
    1. This will include the Application Deadlines table. Make sure the headers are bold text.
  4. For the CTA field, click the + button and select “Link”
    1. add the application URL provided in the copy doc.
    2. For label, add “Apply Now”
    3. Leave image & alt text blank.
    4. For is external, select “Yes” since the application links to a new domain
  5. Under the Items section, click the + button and select “FAQ”
    1. For Internal name, enter “[PROG-ABBR] Application –  [name of the App Requirement]”… (Use the [App Item 1 – Accordion] bolded text)
      1. Example: “[CAB-MED] Application – Undergraduate degree”
      2. Example 2: “[CAB-MED] Application – Official transcripts”
    2. For question, enter the bolded text labeled as [App Item # – Accordion] in the copy doc.
    3. Add the requirement description to the Answer Rich Text
    4. Skip Structured Data Placement
  6. Repeat the above for all items.
CTA Section

For the CTA section of the Curriculum tab, look to see if the CTA language & image is the same across all tabs. 

  • If it is the same, click the + button and select “Add existing content”. You can add the Media Module you created from the Overview section.
  • If it is different, follow the “CTA Section” directions under the Overview tab.

Legal Tab

Not every Flex program will have a Legal tab.

The various Legal pages that we usually host on separate pages on our degree sites will be placed into accordions for this tab section to avoid the page being very long. 

For the Legal section, click the + button and select “FAQ Module” under “New Content”

  1. For Internal name, enter “[PROG-ABBR] Legal”
  2. For title, enter “Legal” or what is noted in the copy doc.
  3. Under the “faqs” section, click the + button and select “FAQ”
    • For the name, enter “[PROG-ABBR] [legal item header]”. Use the text labeled [Accordion # – ___] from the copy doc.
      • Example: “[CAB-MED] Terms of Use”
      • Example 2: “[CAB-MED] State Authorization”
    • For question, add the text labeled [Accordion # – ___] from the copy doc.
    • Add the all of the copy for that section to the Answer Rich Text.
      • ***these sections will need a lot of formatting corrections throughout – especially Terms of Use & Privacy Policy. Make sure to take note of jump links that currently aren’t possible in Compose.
  4. For appearance, enter “default”
  5. For Theme, select “background-white”

Modules Section – these span across all tabs 

Under the tab sections of the page, we are able to add various modules that are present across all of the different tabs.

Disclaimer Module

Within the Modules section, click the + button and select “Add existing content”. 

  • Choose your Content Type as “Disclaimer Module” and search for the reusable module – “Technology and services powered by 2U, Inc., the parent company of edX.” 
  • Make sure you are using the module that has been used many times across our pages. It will have a [🔗100] label on the top of the module.

Footnote Module

This module is only necessary if you added footnotes within the copy of the page.

Within the Modules section, click the + button and select “Footnote Module” under “New Content”

  1. For Internal name, enter “[PROG-ABBR] Footnotes”

Program Referral Module

Coming soon – not currently used on any of the Flex pages.  This module will likely be used for micro-masters.

CTA button text section

  1. Enter “Request More Info” into the text field if it is not already populated.