Accordion Arrow

Main Example

- id: "accordion_arrow"
  data:
    heading: "Requirements and Enrollment Process"
    modules:
      - title: "Age Requirement"
        description: "Be 16 years of age or older (minors will need parental/guardian permission and proof of voluntary withdrawal from school to enroll)"
      - title: "Submit Online Admission Form"
        description: "Complete our Online Application form at no cost."
        url: "https://mdcwap.mdc.edu/adulteducationadmission/"
      - title: "Take the CASAS Placement Test"
        description: "Take the Comprehensive Adult Student Assessment Systems (CASAS) placement test at one of our centers.\nOn the day of the exam, you must present a valid government-issued photo ID in order to take the exam. (Passport, driver's license, etc). The CASAS Placement in-person testing fee is $15.00.\nMore information about <a class='underline' href='https://www.mdc.edu/testing/tests/casas/' target='_blank'>CASAS testing.</a>"
      - title: "Complete Registration and Payment"
        description: "Register at the Continuing Education office and then pay your registration fee at the Bursar's Office ($30.00 per semester)."

- id: "accordion_arrow"
 data:
 heading: "Requirements and Enrollment Process"
 modules:
 - title: "Age Requirement"
 description: "Be 16 years of age or older (minors will need parental/guardian permission and proof of voluntary withdrawal from school to enroll)"
 - title: "Submit Online Admission Form"
 description: "Complete our Online Application form at no cost."
 url: "https://mdcwap.mdc.edu/adulteducationadmission/"
 - title: "Take the CASAS Placement Test"
 description: "Take the Comprehensive Adult Student Assessment Systems (CASAS) placement test at one of our centers.\nOn the day of the exam, you must present a valid government-issued photo ID in order to take the exam. (Passport, driver's license, etc). The CASAS Placement in-person testing fee is $15.00.\nMore information about <a class='underline' href='https://www.mdc.edu/testing/tests/casas/' target='_blank'>CASAS testing.</a>"
 - title: "Complete Registration and Payment"
 description: "Register at the Continuing Education office and then pay your registration fee at the Bursar's Office ($30.00 per semester)."

Accordion Plus Minus

Main Example

- id: "accordion_plus_minus"
  data:
    heading:
      label: "Frequently Asked Questions (FAQ)"
      classes:
        - "align-items-start"
        - "py-4"
    questions:
      - question: "What is the GATE Program?"
        answer: "The GATE Program stands for 'Graduation Alternative to Traditional Education (GATE) Program. It's designed to offer an alternative pathway to the workforce for students who may not complete traditional high school."
      - question: "What are the GATE Program eligibility requirements?"
        answer:
          heading: "To be eligible to participate in the GATE Program, the Adult Education student must:"
          list:
            - text: "Not have earned a standard high school diploma or a high school equivalency diploma."
            - text: "Be a Florida resident."
            - text: "Be concurrently enrolled in an adult secondary education program and a career education program at a college, career center, or a charter technical career center."
            - text: "Be between the ages of 16 and 21."
            - text: "Have a Withdrawal Form* for applicants, ages 16-17."
            - text: "Select a Career and Technical Education Pathway or Program."
            - text: "Must score at NRS Educational Functioning Level 5 or 6"
            - text: "Withdrawal Document: When a student reaches 16 years of age, he/she is no longer required to attend school if he/she files the required formal declaration of intent to terminate school enrollment with the school district and the declaration is signed by the parent. The declaration must acknowledge that leaving school will likely reduce the student's earning potential. The school district is required to notify the child's parent or legal guardian that the student has filed a declaration of intent to leave school."
      - question: "How does the GATE Program expand access to career and technical education?"
        answer: "The GATE Program provides opportunities for students to gain career and technical education outside of the traditional high school setting. This expands access by offering alternative pathways for students who may not thrive in traditional academic environments."
      - question: "What are some benefits of the GATE Program?"
        answer: "Some benefits include providing practical skills training, fostering career readiness, and offering opportunities for students to enter the workforce directly after completing the program. Additionally, it helps to address the needs of students who may not excel in traditional academic settings but thrive in hands-on learning environments."
      - question: "Where can I take the TABE exam?"
        answer: "You can take the computer-based test at any Miami Dade College Campuses."
      - question: "What is the cost of the test?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "What will my GED diploma say?"
        answer: "Your diploma will have the words State of Florida and High School Diploma on it. It is just as valid as the diplomas given at any state high school."
      - question: "What if my TABE scores are low?"
        answer: "Low TABE scores shouldn't stop you from seeking your GED. MDC has specific courses in the Adult Education department which can help you get to the 9.0 level that is necessary for the GED courses."
      - question: "I am a home-study student. Can I enroll?"
        answer: "Yes. Home-study students must comply with the same requirements as students who are no longer attending Miami-Dade County Public Schools."
      - question: "Do you offer both morning and evening classes?"
        answer: "Classes are available during the morning and evening."
      - question: "What is the cost of the program?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "How long will it take before I am ready for the GED test?"
        answer: "The GED preparation program allows students to work at their own pace. Each student enters at a different level and dedicates varying amounts of time to studying for the GED. In order to remain enrolled, students must meet the program attendance requirement. Regular attendance in the GED Lab will allow a student to complete the program faster. When a student feels he/she is ready to take the exam, a practice test is highly recommended. The practice test has been shown to be a very good predictor of a student's score on the test. If the score on this practice test shows the student is ready, GED staff will assist the student in registering for the GED Exam."
      - question: "What about books and other materials?"
        answer: "All GED learning materials are in the classroom. However, if you want to study at home, please discuss this with the instructor."
      - question: "If I can't come to in-person class, is there an online option?"
        answer: "Classes are also available online."

- id: "accordion_plus_minus"
  data:
    heading:
      label: "Frequently Asked Questions (FAQ)"
      classes:
        - "align-items-start"
        - "py-4"
    questions:
      - question: "What is the GATE Program?"
        answer: "The GATE Program stands for 'Graduation Alternative to Traditional Education (GATE) Program. It's designed to offer an alternative pathway to the workforce for students who may not complete traditional high school."
      - question: "What are the GATE Program eligibility requirements?"
        answer:
          heading: "To be eligible to participate in the GATE Program, the Adult Education student must:"
          list:
            - text: "Not have earned a standard high school diploma or a high school equivalency diploma."
            - text: "Be a Florida resident."
            - text: "Be concurrently enrolled in an adult secondary education program and a career education program at a college, career center, or a charter technical career center."
            - text: "Be between the ages of 16 and 21."
            - text: "Have a Withdrawal Form* for applicants, ages 16-17."
            - text: "Select a Career and Technical Education Pathway or Program."
            - text: "Must score at NRS Educational Functioning Level 5 or 6"
            - text: "Withdrawal Document: When a student reaches 16 years of age, he/she is no longer required to attend school if he/she files the required formal declaration of intent to terminate school enrollment with the school district and the declaration is signed by the parent. The declaration must acknowledge that leaving school will likely reduce the student's earning potential. The school district is required to notify the child's parent or legal guardian that the student has filed a declaration of intent to leave school."
      - question: "How does the GATE Program expand access to career and technical education?"
        answer: "The GATE Program provides opportunities for students to gain career and technical education outside of the traditional high school setting. This expands access by offering alternative pathways for students who may not thrive in traditional academic environments."
      - question: "What are some benefits of the GATE Program?"
        answer: "Some benefits include providing practical skills training, fostering career readiness, and offering opportunities for students to enter the workforce directly after completing the program. Additionally, it helps to address the needs of students who may not excel in traditional academic settings but thrive in hands-on learning environments."
      - question: "Where can I take the TABE exam?"
        answer: "You can take the computer-based test at any Miami Dade College Campuses."
      - question: "What is the cost of the test?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "What will my GED diploma say?"
        answer: "Your diploma will have the words State of Florida and High School Diploma on it. It is just as valid as the diplomas given at any state high school."
      - question: "What if my TABE scores are low?"
        answer: "Low TABE scores shouldn't stop you from seeking your GED. MDC has specific courses in the Adult Education department which can help you get to the 9.0 level that is necessary for the GED courses."
      - question: "I am a home-study student. Can I enroll?"
        answer: "Yes. Home-study students must comply with the same requirements as students who are no longer attending Miami-Dade County Public Schools."
      - question: "Do you offer both morning and evening classes?"
        answer: "Classes are available during the morning and evening."
      - question: "What is the cost of the program?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "How long will it take before I am ready for the GED test?"
        answer: "The GED preparation program allows students to work at their own pace. Each student enters at a different level and dedicates varying amounts of time to studying for the GED. In order to remain enrolled, students must meet the program attendance requirement. Regular attendance in the GED Lab will allow a student to complete the program faster. When a student feels he/she is ready to take the exam, a practice test is highly recommended. The practice test has been shown to be a very good predictor of a student's score on the test. If the score on this practice test shows the student is ready, GED staff will assist the student in registering for the GED Exam."
      - question: "What about books and other materials?"
        answer: "All GED learning materials are in the classroom. However, if you want to study at home, please discuss this with the instructor."
      - question: "If I can't come to in-person class, is there an online option?"
        answer: "Classes are also available online."

Component Versions

Simple Faq

Course curriculum format with weekly structure and learning objectives

- id: "accordion_plus_minus"
  data:
    heading:
      label: "Take your skills <br/> to the next level!"
      classes:
        - "align-items-center"
    sub_heading: "AI is changing how we work, create, and <br/> make decisions. Don't just watch it <br/> happen, be part of it!"
    questions:
      - question: "<span class='bold-700'>Week 1: </span> <span class='bold-500'>AI Essentials Part 1</span>"
        answer:
          list:
            - text: "Use generative AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks."
            - text: "Write clear and specific prompts to get the output you want."
            - text: "AI tools during Saturday workshop."
      - question: "<span class='bold-700'>Week 2: </span> <span class='bold-500'>AI Essentials Part 2</span>"
        answer:
          list:
            - text: "Use AI responsibly by identifying AI's potential biases and avoiding harm."
            - text: "Develop strategies to stay up-to-date in the emerging landscape of AI."
            - text: "AI tools during Saturday workshop."
      - question: "<span class='bold-700'>Week 3: </span> <span class='bold-500'>Prompting Essentials Part 1</span>"
        answer:
          list:
            - text: "Practice using 5 steps to write effective prompts."
            - text: "Apply prompting techniques to help you with every-day work tasks."
            - text: "AI tools during Saturday workshop."
      - question: "<span class='bold-700'>Week 4: </span> <span class='bold-500'>Prompting Essentials Part 2</span>"
        answer:
          list:
            - text: "Use prompting to speed up data analysis and build presentations."
            - text: "Design prompts to create AI agents to role-play conversations and get expert feedback."
            - text: "AI tools during Saturday workshop."

- id: "accordion_plus_minus"
 data:
 heading:
 label: "Take your skills to the next level!"
 classes:
 - "align-items-center"
 sub_heading: "AI is changing how we work, create, and make decisions. Don't just watch it happen, be part of it!"
 questions:
 - question: "Week 1: AI Essentials Part 1"
 answer:
 list:
 - text: "Use generative AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks."
 - text: "Write clear and specific prompts to get the output you want."
 - text: "AI tools during Saturday workshop."
 - question: "Week 2: AI Essentials Part 2"
 answer:
 list:
 - text: "Use AI responsibly by identifying AI's potential biases and avoiding harm."
 - text: "Develop strategies to stay up-to-date in the emerging landscape of AI."
 - text: "AI tools during Saturday workshop."
 - question: "Week 3: Prompting Essentials Part 1"
 answer:
 list:
 - text: "Practice using 5 steps to write effective prompts."
 - text: "Apply prompting techniques to help you with every-day work tasks."
 - text: "AI tools during Saturday workshop."
 - question: "Week 4: Prompting Essentials Part 2"
 answer:
 list:
 - text: "Use prompting to speed up data analysis and build presentations."
 - text: "Design prompts to create AI agents to role-play conversations and get expert feedback."
 - text: "AI tools during Saturday workshop."

Structured Faq

FAQ with complex structured answers including lists, headings, and extensive content

- id: "accordion_plus_minus"
  data:
    heading:
      label: "Frequently Asked Questions (FAQ)"
      classes:
        - "align-items-start"
        - "py-4"
    questions:
      - question: "What is the GATE Program?"
        answer: "The GATE Program stands for 'Graduation Alternative to Traditional Education (GATE) Program. It's designed to offer an alternative pathway to the workforce for students who may not complete traditional high school."
      - question: "What are the GATE Program eligibility requirements?"
        answer:
          heading: "To be eligible to participate in the GATE Program, the Adult Education student must:"
          list:
            - text: "Not have earned a standard high school diploma or a high school equivalency diploma."
            - text: "Be a Florida resident."
            - text: "Be concurrently enrolled in an adult secondary education program and a career education program at a college, career center, or a charter technical career center."
            - text: "Be between the ages of 16 and 21."
            - text: "Have a Withdrawal Form* for applicants, ages 16-17."
            - text: "Select a Career and Technical Education Pathway or Program."
            - text: "Must score at NRS Educational Functioning Level 5 or 6"
            - text: "Withdrawal Document: When a student reaches 16 years of age, he/she is no longer required to attend school if he/she files the required formal declaration of intent to terminate school enrollment with the school district and the declaration is signed by the parent. The declaration must acknowledge that leaving school will likely reduce the student's earning potential. The school district is required to notify the child's parent or legal guardian that the student has filed a declaration of intent to leave school."
      - question: "How does the GATE Program expand access to career and technical education?"
        answer: "The GATE Program provides opportunities for students to gain career and technical education outside of the traditional high school setting. This expands access by offering alternative pathways for students who may not thrive in traditional academic environments."
      - question: "What are some benefits of the GATE Program?"
        answer: "Some benefits include providing practical skills training, fostering career readiness, and offering opportunities for students to enter the workforce directly after completing the program. Additionally, it helps to address the needs of students who may not excel in traditional academic settings but thrive in hands-on learning environments."
      - question: "Where can I take the TABE exam?"
        answer: "You can take the computer-based test at any Miami Dade College Campuses."
      - question: "What is the cost of the test?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "What will my GED diploma say?"
        answer: "Your diploma will have the words State of Florida and High School Diploma on it. It is just as valid as the diplomas given at any state high school."
      - question: "What if my TABE scores are low?"
        answer: "Low TABE scores shouldn't stop you from seeking your GED. MDC has specific courses in the Adult Education department which can help you get to the 9.0 level that is necessary for the GED courses."
      - question: "I am a home-study student. Can I enroll?"
        answer: "Yes. Home-study students must comply with the same requirements as students who are no longer attending Miami-Dade County Public Schools."
      - question: "Do you offer both morning and evening classes?"
        answer: "Classes are available during the morning and evening."
      - question: "What is the cost of the program?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "How long will it take before I am ready for the GED test?"
        answer: "The GED preparation program allows students to work at their own pace. Each student enters at a different level and dedicates varying amounts of time to studying for the GED. In order to remain enrolled, students must meet the program attendance requirement. Regular attendance in the GED Lab will allow a student to complete the program faster. When a student feels he/she is ready to take the exam, a practice test is highly recommended. The practice test has been shown to be a very good predictor of a student's score on the test. If the score on this practice test shows the student is ready, GED staff will assist the student in registering for the GED Exam."
      - question: "What about books and other materials?"
        answer: "All GED learning materials are in the classroom. However, if you want to study at home, please discuss this with the instructor."
      - question: "If I can't come to in-person class, is there an online option?"
        answer: "Classes are also available online."

- id: "accordion_plus_minus"
  data:
    heading:
      label: "Frequently Asked Questions (FAQ)"
      classes:
        - "align-items-start"
        - "py-4"
    questions:
      - question: "What is the GATE Program?"
        answer: "The GATE Program stands for 'Graduation Alternative to Traditional Education (GATE) Program. It's designed to offer an alternative pathway to the workforce for students who may not complete traditional high school."
      - question: "What are the GATE Program eligibility requirements?"
        answer:
          heading: "To be eligible to participate in the GATE Program, the Adult Education student must:"
          list:
            - text: "Not have earned a standard high school diploma or a high school equivalency diploma."
            - text: "Be a Florida resident."
            - text: "Be concurrently enrolled in an adult secondary education program and a career education program at a college, career center, or a charter technical career center."
            - text: "Be between the ages of 16 and 21."
            - text: "Have a Withdrawal Form* for applicants, ages 16-17."
            - text: "Select a Career and Technical Education Pathway or Program."
            - text: "Must score at NRS Educational Functioning Level 5 or 6"
            - text: "Withdrawal Document: When a student reaches 16 years of age, he/she is no longer required to attend school if he/she files the required formal declaration of intent to terminate school enrollment with the school district and the declaration is signed by the parent. The declaration must acknowledge that leaving school will likely reduce the student's earning potential. The school district is required to notify the child's parent or legal guardian that the student has filed a declaration of intent to leave school."
      - question: "How does the GATE Program expand access to career and technical education?"
        answer: "The GATE Program provides opportunities for students to gain career and technical education outside of the traditional high school setting. This expands access by offering alternative pathways for students who may not thrive in traditional academic environments."
      - question: "What are some benefits of the GATE Program?"
        answer: "Some benefits include providing practical skills training, fostering career readiness, and offering opportunities for students to enter the workforce directly after completing the program. Additionally, it helps to address the needs of students who may not excel in traditional academic settings but thrive in hands-on learning environments."
      - question: "Where can I take the TABE exam?"
        answer: "You can take the computer-based test at any Miami Dade College Campuses."
      - question: "What is the cost of the test?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "What will my GED diploma say?"
        answer: "Your diploma will have the words State of Florida and High School Diploma on it. It is just as valid as the diplomas given at any state high school."
      - question: "What if my TABE scores are low?"
        answer: "Low TABE scores shouldn't stop you from seeking your GED. MDC has specific courses in the Adult Education department which can help you get to the 9.0 level that is necessary for the GED courses."
      - question: "I am a home-study student. Can I enroll?"
        answer: "Yes. Home-study students must comply with the same requirements as students who are no longer attending Miami-Dade County Public Schools."
      - question: "Do you offer both morning and evening classes?"
        answer: "Classes are available during the morning and evening."
      - question: "What is the cost of the program?"
        answer: "Students enrolled in the GATE Program are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials are available free of charge."
      - question: "How long will it take before I am ready for the GED test?"
        answer: "The GED preparation program allows students to work at their own pace. Each student enters at a different level and dedicates varying amounts of time to studying for the GED. In order to remain enrolled, students must meet the program attendance requirement. Regular attendance in the GED Lab will allow a student to complete the program faster. When a student feels he/she is ready to take the exam, a practice test is highly recommended. The practice test has been shown to be a very good predictor of a student's score on the test. If the score on this practice test shows the student is ready, GED staff will assist the student in registering for the GED Exam."
      - question: "What about books and other materials?"
        answer: "All GED learning materials are in the classroom. However, if you want to study at home, please discuss this with the instructor."
      - question: "If I can't come to in-person class, is there an online option?"
        answer: "Classes are also available online."

Course Content

Requirements and enrollment process with structured nested content lists

- id: "accordion_plus_minus"
  data:
    heading:
      label: "Requirements <br/> and Enrollment <br/>Process"
      classes:
        - "align-items-center"
    sub_heading: "ESOL students can access a specific list of programs, while GED students have their own tailored options."
    questions:
      - question: "ESOL Requirements"
        answer:
          list:
            - text: "Must be 16 years or older (18+ for the CNA program). Minors will need parental/guardian permission and proof of voluntary withdrawal from school (if attending another similar program)."
            - text: "Complete the Comprehensive Adult Student Assessment Systems (CASAS) placement test at one of our centers (one-time fee of $20) and achieve level 5. On the day of the test, you must present a valid government-issued photo ID to take the test (passport or driver's license)"
      - question: "GED Requirements"
        answer:
          list:
            - text: "Must be 16 years or older. Minors will need parental/guardian permission and proof of voluntary withdrawal from school (if attending another similar program)."
            - text: "Complete the Test of Adult Basic Education (TABE) placement test at one of our centers. On the day of the exam you must present a valid government-issued photo ID in order to take the exam. (Passport, driver's license, etc). More information about TABE testing "
            - text: "Available for students in GED level NRS 5 and 6 scores. "

- id: "accordion_plus_minus"
 data:
 heading:
 label: "Requirements and Enrollment Process"
 classes:
 - "align-items-center"
 sub_heading: "ESOL students can access a specific list of programs, while GED students have their own tailored options."
 questions:
 - question: "ESOL Requirements"
 answer:
 list:
 - text: "Must be 16 years or older (18+ for the CNA program). Minors will need parental/guardian permission and proof of voluntary withdrawal from school (if attending another similar program)."
 - text: "Complete the Comprehensive Adult Student Assessment Systems (CASAS) placement test at one of our centers (one-time fee of $20) and achieve level 5. On the day of the test, you must present a valid government-issued photo ID to take the test (passport or driver's license)"
 - question: "GED Requirements"
 answer:
 list:
 - text: "Must be 16 years or older. Minors will need parental/guardian permission and proof of voluntary withdrawal from school (if attending another similar program)."
 - text: "Complete the Test of Adult Basic Education (TABE) placement test at one of our centers. On the day of the exam you must present a valid government-issued photo ID in order to take the exam. (Passport, driver's license, etc). More information about TABE testing "
 - text: "Available for students in GED level NRS 5 and 6 scores. "

Accordion Static

Main Example

- id: "accordion_static"
  data:
    heading: "Eligibility Requirements"
    heading_mobile: "Eligibility <br/> Requirements"
    badges:
      - description: "Must be between the ages of 16 and 21"
      - description: "Must be Florida resident"
      - description: "Not have earned a standard high school diploma or a high school equivalency diploma"
      - description: "Be concurrently enrolled in an Adult Secondary Education Program (GED) and a Career Education Program at a college, career center, or a charter technical career center"
      - description: "Be concurrently enrolled in an Adult Secondary Education Program (GED) and a Career Education Program at a college, career center, or a charter technical career center"
      - description: "Must score at NRS Educational Functioning Level 5 or 6"
      - description: "Have a Withdrawal Form for applicants, ages 16-17"

Projects Carousel

Carousel displaying projects or programs with technology badges in responsive cards

Main Example

- id: "projects_carousel"
  data:
    heading: "Learn by building real-life projects"
    description: "When learning to code at your own pace, having access to video tutorials, code examples, and continuous, real-time feedback is crucial to succeed. The tasks you'll tackle will closely resemble those encountered in a real-world tech position. Here's a glimpse of what you'll be working on:"
    programs:
      - title: "Build a StarWars REST API"
        span: "REST / Flask"
      - title: "Authentication system <br /> with Flask and React.js"
        span: "JavaScript / Flask"
      - title: "Family Static API with Flask"
        span: "Data Structures / Serialization"
      - title: "Domain Name Agents"
        span: "Node / JavaScript"
      - title: "Validate an HTML Form"
        span: "Bootstrap / JavaScript"
      - title: "Personal Portfolio with React"
        span: "Bootstrap / React"
      - title: "Landing Page with React"
        span: "JavaScript / React"
      - title: "Excuse Agents CLI"
        span: "Python / Flask"
      - title: "Family Static API with Flask"
        span: "Data Structures / Serialization"
  params: {}

- id: "projects_carousel"
 data:
 heading: "Learn by building real-life projects"
 description: "When learning to code at your own pace, having access to video tutorials, code examples, and continuous, real-time feedback is crucial to succeed. The tasks you'll tackle will closely resemble those encountered in a real-world tech position. Here's a glimpse of what you'll be working on:"
 programs:
 - title: "Build a StarWars REST API"
 span: "REST / Flask"
 - title: "Authentication system with Flask and React.js"
 span: "JavaScript / Flask"
 - title: "Family Static API with Flask"
 span: "Data Structures / Serialization"
 - title: "Domain Name Agents"
 span: "Node / JavaScript"
 - title: "Validate an HTML Form"
 span: "Bootstrap / JavaScript"
 - title: "Personal Portfolio with React"
 span: "Bootstrap / React"
 - title: "Landing Page with React"
 span: "JavaScript / React"
 - title: "Excuse Agents CLI"
 span: "Python / Flask"
 - title: "Family Static API with Flask"
 span: "Data Structures / Serialization"
 params: {}

Simple Images Carousel

Continuously scrolling carousel for showcasing logos, certifications, or image galleries

Main Example

- id: "simple_images_carousel"
  data:
    heading: "From Learning to Fun<br />See What's On!"
    images:
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/art.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/art.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/chef.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/chef.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/codecamp.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/codecamp.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/dadchef.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/dadchef.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/code.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/code.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/dance.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/dance.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/hands.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/hands.png') }}"
    params: {}

- id: "simple_images_carousel"
 data:
 heading: "From Learning to Fun See What's On!"
 images:
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/art.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/art.png') }}"
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/chef.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/chef.png') }}"
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/codecamp.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/codecamp.png') }}"
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/dadchef.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/dadchef.png') }}"
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/code.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/code.png') }}"
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/dance.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/dance.png') }}"
 - url: "https://storage.googleapis.com/mdc-website/summercamps-program-area/hands.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-program-area/hands.png') }}"
 params: {}

Trending Courses Carousel

Glass-panel horizontal carousel of highlight course cards (image, optional chip, title, description, Learn more). Editorial/manual list updated each term — not driven by enrollment counts.

Main Example

- id: "trending_courses_carousel"
  data:
    heading: "Trending Courses"
    cards:
      - chip: "Scholarships Available"
        title: "Apple iOS Developer with Swift"
        description: "Become a certified Apple iOS Developer. Learn to design, code, and deploy iOS apps with Swift and Xcode."
        image:
          url: "https://storage.googleapis.com/mdc-website/ios-developer/ios-developer_hero-big.jpg"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/ios-developer/ios-developer_hero-big.jpg') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "ios-developer"
      - title: "Certified Nursing Assistant (CNA)"
        description: "Launch a healthcare career in about 120 hours. Build patient-care skills and prepare for the Florida CNA exam."
        image:
          url: "https://storage.googleapis.com/mdc-website/cna-courses_certified-nursing-assistant-padron/cna-about-v1.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/cna-courses_certified-nursing-assistant-padron/cna-about-v1.png') }}"
        learn_more_button:
          label: "Learn more"
          url: "https://ce.mdc.edu/public/category/programArea.do?method=load&selectedProgramAreaId=1017610"

- id: "trending_courses_carousel"
  data:
    heading: "Trending Courses"
    cards:
      - chip: "Scholarships Available"
        title: "Apple iOS Developer with Swift"
        description: "Become a certified Apple iOS Developer. Learn to design, code, and deploy iOS apps with Swift and Xcode."
        image:
          url: "https://storage.googleapis.com/mdc-website/ios-developer/ios-developer_hero-big.jpg"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/ios-developer/ios-developer_hero-big.jpg') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "ios-developer"
      - title: "Certified Nursing Assistant (CNA)"
        description: "Launch a healthcare career in about 120 hours. Build patient-care skills and prepare for the Florida CNA exam."
        image:
          url: "https://storage.googleapis.com/mdc-website/cna-courses_certified-nursing-assistant-padron/cna-about-v1.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/cna-courses_certified-nursing-assistant-padron/cna-about-v1.png') }}"
        learn_more_button:
          label: "Learn more"
          url: "https://ce.mdc.edu/public/category/programArea.do?method=load&selectedProgramAreaId=1017610"

Testimonials Carousel

Student testimonials carousel with quote cards and responsive layout

Main Example

- id: "testimonials_carousel"
  data:
    heading: "Hear from our students"
    heading_mobile: "Hear from <br/> our students"
    description: "Discover how Miami Dade College has transformed the lives of our students. <br/> Explore their journeys, successes and how MDC helped them achieve their career goals."
    testimony:
      - quote: "I joined the GED program to improve my future. Studying in English while handling family duties was tough, but I learned time management and resilience. Now that I have my GED, I'm aiming for a College Credit Certificate in Business Management and eventually want to become a nurse. My advice: It's never too late to learn. Stay focused, believe in yourself, and new opportunities will come."
        author: "Jennyfer Pavon"
        position: "GED student"
      - quote: "I came to this college and the staff were very patient with me. They encouraged me to continue my education with the ESOL and GED programs in English. Two years ago, I didn't think I could achieve even half of what I have now. I'm really proud to have graduated from GED and MDC with no debt, thanks to the financial aid and scholarships from Continuing Education and MDC."
        author: "Jose Valles"
        position: "ESOL / GED student"
      - quote: "When I arrived from Cuba two years ago, I knew I had to learn English for better job opportunities. At MDC, everyone was friendly and supportive, like a family. My life changed drastically; I'm now training as a Relationship Banker at Bank of America. It wasn't easy balancing work and study, but the professors prepared me well for the real world. It was hard, but I did it."
        author: "Amanda Acosta"
        position: "ESOL student"
      - quote: "I am from Nicaragua and have always loved medicine, but it was too expensive in my country. When I came here, I saw English as a barrier to my professional growth. I started studying ESOL and by the fifth level, we could continue ESOL and take a  Professional course. This motivated me, as I couldn't afford such courses otherwise. Now, I can study online and practice skills in the lab, making it easier to grow step by step."
        author: "Esther Mesa"
        position: "ESOL / IET student"
  params: {}

- id: "testimonials_carousel"
 data:
 heading: "Hear from our students"
 heading_mobile: "Hear from our students"
 description: "Discover how Miami Dade College has transformed the lives of our students. Explore their journeys, successes and how MDC helped them achieve their career goals."
 testimony:
 - quote: "I joined the GED program to improve my future. Studying in English while handling family duties was tough, but I learned time management and resilience. Now that I have my GED, I'm aiming for a College Credit Certificate in Business Management and eventually want to become a nurse. My advice: It's never too late to learn. Stay focused, believe in yourself, and new opportunities will come."
 author: "Jennyfer Pavon"
 position: "GED student"
 - quote: "I came to this college and the staff were very patient with me. They encouraged me to continue my education with the ESOL and GED programs in English. Two years ago, I didn't think I could achieve even half of what I have now. I'm really proud to have graduated from GED and MDC with no debt, thanks to the financial aid and scholarships from Continuing Education and MDC."
 author: "Jose Valles"
 position: "ESOL / GED student"
 - quote: "When I arrived from Cuba two years ago, I knew I had to learn English for better job opportunities. At MDC, everyone was friendly and supportive, like a family. My life changed drastically; I'm now training as a Relationship Banker at Bank of America. It wasn't easy balancing work and study, but the professors prepared me well for the real world. It was hard, but I did it."
 author: "Amanda Acosta"
 position: "ESOL student"
 - quote: "I am from Nicaragua and have always loved medicine, but it was too expensive in my country. When I came here, I saw English as a barrier to my professional growth. I started studying ESOL and by the fifth level, we could continue ESOL and take a Professional course. This motivated me, as I couldn't afford such courses otherwise. Now, I can study online and practice skills in the lab, making it easier to grow step by step."
 author: "Esther Mesa"
 position: "ESOL / IET student"
 params: {}

Box Carousel

Carousel for displaying client logos or partner boxes in a rotating format

Main Example

- id: "box_carousel"
  data:
    heading: "Some of our past clients include"
    images:
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/baptist.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/baptist.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/carnival2.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/carnival2.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/hialeahdade.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/hialeahdade.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/jackson.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/jackson.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/mia.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/mia.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/palm2.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/palm2.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/univision.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/univision.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/images-web-%C6%92/mount-sinai-logo.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/images-web-%C6%92/mount-sinai-logo.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/visa.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/visa.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/images-web-%C6%92/bakerly_LOGO.webp"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/images-web-%C6%92/bakerly_LOGO.webp') }}"
      - url: "https://storage.googleapis.com/mdc-website/images-web-%C6%92/ctp-logo-classic.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/images-web-%C6%92/ctp-logo-classic.png') }}"
  params: {}

- id: "box_carousel"
  data:
    heading: "Some of our past clients include"
    images:
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/baptist.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/baptist.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/carnival2.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/carnival2.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/hialeahdade.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/hialeahdade.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/jackson.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/jackson.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/mia.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/mia.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/palm2.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/palm2.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/univision.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/univision.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/images-web-%C6%92/mount-sinai-logo.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/images-web-%C6%92/mount-sinai-logo.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/visa.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/visa.png') }}"
      - url: "https://storage.googleapis.com/mdc-website/images-web-%C6%92/bakerly_LOGO.webp"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/images-web-%C6%92/bakerly_LOGO.webp') }}"
      - url: "https://storage.googleapis.com/mdc-website/images-web-%C6%92/ctp-logo-classic.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/images-web-%C6%92/ctp-logo-classic.png') }}"
  params: {}

Success Carousel

Carousel for showcasing success stories and case studies with employee profiles

Main Example

- id: "success_carousel"
  data:
    heading: "Success cases"
    description: "86% of our students has been hired"
    success_cases:
      - name: "Peter Schwarck"
        role: "Business Systems Analyst"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/ebay.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/ebay.png') }}"
        company_name: "eBay"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/peter.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/peter.png') }}"
      - name: "Azam Abdul Malik"
        role: "Lead Wireless Carrier Engineer"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/facebook.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/facebook.png') }}"
        company_name: "Facebook"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/azam.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/azam.png') }}"
      - name: "João Silva"
        role: "Software Engineer"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/microsoft.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/microsoft.png') }}"
        company_name: "Microsoft"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/joao.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/joao.png') }}"
      - name: "Rebecca Johnson"
        role: "Software Engineer"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/hashicorp.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/hashicorp.png') }}"
        company_name: "HashiCorp"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/rebecca.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/rebecca.png') }}"

- id: "success_carousel"
  data:
    heading: "Success cases"
    description: "86% of our students has been hired"
    success_cases:
      - name: "Peter Schwarck"
        role: "Business Systems Analyst"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/ebay.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/ebay.png') }}"
        company_name: "eBay"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/peter.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/peter.png') }}"
      - name: "Azam Abdul Malik"
        role: "Lead Wireless Carrier Engineer"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/facebook.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/facebook.png') }}"
        company_name: "Facebook"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/azam.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/azam.png') }}"
      - name: "João Silva"
        role: "Software Engineer"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/microsoft.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/microsoft.png') }}"
        company_name: "Microsoft"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/joao.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/joao.png') }}"
      - name: "Rebecca Johnson"
        role: "Software Engineer"
        company_logo:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/hashicorp.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/hashicorp.png') }}"
        company_name: "HashiCorp"
        profile_image:
          url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/rebecca.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/rebecca.png') }}"

Horizontal Cards Carousel

Interactive carousel of content cards for showcasing projects or promotional content

Main Example

- id: "horizontal_cards_carousel"
  data:
    slides:
      - caption: "Master English, expand your world!"
        heading: "Intensive English"
        description:
          - text: "Enroll today in our Intensive English Program and unlock new opportunities for your future."
        image:
          url: "https://storage.googleapis.com/mdc-website/english-program/intensive.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/intensive.png') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "intensive-english-stream"
      - caption: "English conversation"
        heading: "English Conversation"
        description:
          - text: "Enroll today in our Intensive English Program and unlock new opportunities for your future."
        image:
          url: "https://storage.googleapis.com/mdc-website/english-program/confidence.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/confidence.png') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "english-conversation"
      - caption: "TOEFL Preparation"
        heading: "Specialty Courses"
        description:
          - text: "Enroll today in our Intensive English Program and unlock new opportunities for your future."
        image:
          url: "https://storage.googleapis.com/mdc-website/english-program/toefl.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/toefl.png') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "english-specialty"

- id: "horizontal_cards_carousel"
  data:
    slides:
      - caption: "Master English, expand your world!"
        heading: "Intensive English"
        description:
          - text: "Enroll today in our Intensive English Program and unlock new opportunities for your future."
        image:
          url: "https://storage.googleapis.com/mdc-website/english-program/intensive.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/intensive.png') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "intensive-english-stream"
      - caption: "English conversation"
        heading: "English Conversation"
        description:
          - text: "Enroll today in our Intensive English Program and unlock new opportunities for your future."
        image:
          url: "https://storage.googleapis.com/mdc-website/english-program/confidence.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/confidence.png') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "english-conversation"
      - caption: "TOEFL Preparation"
        heading: "Specialty Courses"
        description:
          - text: "Enroll today in our Intensive English Program and unlock new opportunities for your future."
        image:
          url: "https://storage.googleapis.com/mdc-website/english-program/toefl.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/toefl.png') }}"
        learn_more_button:
          label: "Learn more"
          url_slug: "english-specialty"

Testimonials Carousel Light

Social-proof carousel of graduate quote cards (name, program, quote, overlapping avatar). Dark theme by default; set theme: light for the light variant. Use only graduates with written public-feature consent (FERPA).

Main Example

- id: "testimonials_carousel_light"
  data:
    heading: "Hear From Our Graduates"
    heading_mobile: "Hear From <br/> Our Graduates"
    description: "Discover how Miami Dade College has transformed the lives of our students. Explore their journeys, successes and how MDC helped them achieve their career goals."
    description_mobile: "86% of our students has been hired"
    theme: "dark"
    graduates:
      - name: "Student Name"
        program: "Program completed"
        quote: "Short quote placeholder about outcome/experience."
      - name: "Student Name"
        program: "Program completed"
        quote: "Short quote placeholder about outcome/experience."
      - name: "Student Name"
        program: "Program completed"
        quote: "Short quote placeholder about outcome/experience."
      - name: "Student Name"
        program: "Program completed"
        quote: "Short quote placeholder about outcome/experience."

Finder Simple

Simple organized list of courses and programs with easy navigation links

Main Example

- id: "finder_simple"
  data:
    header_content:
      heading: "CTI Programs"
      heading_mobile: "CTI Programs"
      sub_heading: "Explore and discover the programs we offer"
      sub_heading_mobile: "Explore and discover the programs we offer"
    body_content:
      image_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/hat.svg"
      left_side:
        image_url: "https://storage.googleapis.com/mdc-website/cti/group-cti_w400.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/cti/group-cti_w400.png') }}"
        mobile_image_url:
          src: "https://storage.googleapis.com/mdc-website/cti/mobile-cti.png"
          classes: "d-block d-md-none mx-auto"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/cti/mobile-cti.png') }}"
      right_side:
        menu:
          - name: "NCCER | OSHA 10"
            short_name: "nccerosha10"
            url_slug: "nccer-osha"
          - name: "Electrical Technician"
            short_name: "electricianprogram"
            url_slug: "electrician-program"
          - name: "Plumbing Technician"
            short_name: "plumbingprogram"
            url_slug: "plumbing-program"
          - name: "HVAC/R Technician"
            short_name: "hvacrtechnician"
            url_slug: "hvacr-technician"
          - name: "Telecommunications and Fiber Optics Technician"
            short_name: "fiberopticstechnician"
            url_slug: "fiber-optics-technician"

- id: "finder_simple"
  data:
    header_content:
      heading: "CTI Programs"
      heading_mobile: "CTI Programs"
      sub_heading: "Explore and discover the programs we offer"
      sub_heading_mobile: "Explore and discover the programs we offer"
    body_content:
      image_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/hat.svg"
      left_side:
        image_url: "https://storage.googleapis.com/mdc-website/cti/group-cti_w400.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/cti/group-cti_w400.png') }}"
        mobile_image_url:
          src: "https://storage.googleapis.com/mdc-website/cti/mobile-cti.png"
          classes: "d-block d-md-none mx-auto"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/cti/mobile-cti.png') }}"
      right_side:
        menu:
          - name: "NCCER | OSHA 10"
            short_name: "nccerosha10"
            url_slug: "nccer-osha"
          - name: "Electrical Technician"
            short_name: "electricianprogram"
            url_slug: "electrician-program"
          - name: "Plumbing Technician"
            short_name: "plumbingprogram"
            url_slug: "plumbing-program"
          - name: "HVAC/R Technician"
            short_name: "hvacrtechnician"
            url_slug: "hvacr-technician"
          - name: "Telecommunications and Fiber Optics Technician"
            short_name: "fiberopticstechnician"
            url_slug: "fiber-optics-technician"

Finder Dynamic

Interactive hierarchical course finder with expandable categories and program options

Main Example

- id: "finder_dynamic"
  data:
    header_content:
      heading: "Educational <br/>Programs"
      heading_mobile: "Educational <br/>Programs"
      sub_heading: "Explore and discover the courses we offer. <br/> Choose the path that fits your goals!"
      sub_heading_mobile: "Explore and discover the courses we offer. <br/> Choose the path that fits your goals!"
    body_content:
      image_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/hat.svg"
      left_side:
        image_url: "https://storage.googleapis.com/mdc-website/iet/list_scroll_iet.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/iet/list_scroll_iet.png') }}"
      right_side:
        menu:
          - name: "ESOL Pathway"
            short_name: "esolpath"
            body_content:
              left_side:
                slug: "ESOL"
                image_url: "https://storage.googleapis.com/mdc-website/esol.es/esol_pathway_iet.svg"
                alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/esol.es/esol_pathway_iet.svg') }}"
                description: "The MDC ESOL program empowers non-native English speakers to achieve their goals by providing essential language skills."
              right_side:
                menu:
                  - name: "Accounting and Budgeting"
                    short_name: "ab"
                    url: "https://www.mdc.edu/accountingbudgeting"
                  - name: "Artificial Intelligence Awareness"
                    short_name: "ai-awareness"
                    url: "https://www.mdc.edu/aiawareness/"
                  - name: "Artificial Intelligence Practitioner"
                    short_name: "ai-practitioner"
                    url: "https://www.mdc.edu/aipractitioner/"
                  - name: "Business Entrepreneurship Specialist Start-Up Venture"
                    short_name: "bes-suv"
                    url: "https://www.mdc.edu/startupentrepreneurship/"
                  - name: "Business Specialist - Business Management"
                    short_name: "business-mgmt"
                    url: "https://www.mdc.edu/managementspecialist/"
                  - name: "Certified Billing & Coding Specialist"
                    short_name: "cbcs"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Certified+Billing+and+Coding+Specialist&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.filterString=all"
                  - name: "Certified Nursing Assistant (CNA)"
                    short_name: "cna"
                    url: "https://ce.mdc.edu/cna"
                  - name: "Chef Apprentice"
                    short_name: "ca"
                    url: "https://www.mdc.edu/chefapprentice"
                  - name: "Commercial Driver's License Class A"
                    short_name: "cdl-a"
                    url: "https://ce.mdc.edu/cdl"
                  - name: "Commercial Driver's License Class B Truck Driver Heavy FL"
                    short_name: "cdl-b"
                    url: "https://www.mdc.edu/cdlb/"
                  - name: "CompTIA Cloud Essentials+"
                    short_name: "comptia-essentials"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=CompTIA+Cloud+Essentials%2B&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.programStreamStringArray=1248288&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.campusStringArray=0&courseSearch.filterString=availforreg"
                  - name: "Cybersecurity Analyst"
                    short_name: "cyber-analyst"
                    url: "https://www.mdc.edu/cybersecurity-analyst/"
                  - name: "Digital Marketing Specialist"
                    short_name: "dms"
                    url: "https://www.mdc.edu/digitalmarketing/"
                  - name: "Educator Preparation Institute"
                    short_name: "eps"
                    url: "https://www.mdc.edu/educatorpreparation/"
                  - name: "EKG Electrocardiography Technician"
                    short_name: "ekg-tech"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=EKG+Technician+Certification"
                  - name: "Electricity Technician"
                    short_name: "electricity-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21302128&selectedProgramAreaId=13897149&selectedProgramStreamId=21246697"
                  - name: "Food and Beverage Specialist"
                    short_name: "fbs"
                    url: "https://www.mdc.edu/foodbeveragespecialist"
                  - name: "Help Desk Support Technician"
                    short_name: "hdst"
                    url: "https://www.mdc.edu/itsupporttechnician"
                  - name: "Home Health Aide Training Certification"
                    short_name: "hha"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Home+Health+Aide+Training"
                  - name: "HVAC/R Technician"
                    short_name: "hvac-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304378&selectedProgramAreaId=13897149&selectedProgramStreamId=21246765"
                  - name: "Phlebotomy Technician"
                    short_name: "pt"
                    url: "https://www.mdc.edu/phlebotomy/"
                  - name: "Plumbing Technician"
                    short_name: "plumbing-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304609&selectedProgramAreaId=13897149&selectedProgramStreamId=21246779"
                  - name: "Telecommunications and Fiber Optics Technician"
                    short_name: "telecom-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"
          - name: "GED Pathway"
            short_name: "gedpath"
            body_content:
              left_side:
                slug: "GED"
                image_url: "https://storage.googleapis.com/mdc-website/iet/ged_pathway_iet.svg"
                alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/iet/ged_pathway_iet.svg') }}"
                description: "The GED program prepares you to earn a High School Equivalency Diploma, recognized by employers and colleges. It covers Language Arts, Math, Social Studies, and Science, ensuring you gain the skills of a high school graduate."
              right_side:
                menu:
                  - name: "Accounting and Budgeting"
                    short_name: "ab"
                    url: "https://www.mdc.edu/accountingbudgeting"
                  - name: "Artificial Intelligence Awareness"
                    short_name: "ai-awareness"
                    url: "https://www.mdc.edu/aiawareness/"
                  - name: "Artificial Intelligence Practitioner"
                    short_name: "ai-practitioner"
                    url: "https://www.mdc.edu/aipractitioner/"
                  - name: "Business Specialist - Business Management"
                    short_name: "ab"
                    url: "https://www.mdc.edu/managementspecialist"
                  - name: "Certified Billing & Coding Specialist"
                    short_name: "cbcs"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Certified+Billing+and+Coding+Specialist&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.filterString=all"
                  - name: "Chef Apprentice"
                    short_name: "ca"
                    url: "https://www.mdc.edu/chefapprentice"
                  - name: "Commercial Driver's License Class A"
                    short_name: "cdl-a"
                    url: "https://ce.mdc.edu/cdl"
                  - name: "Commercial Driver's License Class B Truck Driver Heavy FL"
                    short_name: "cdl-b"
                    url: "https://www.mdc.edu/cdlb/"
                  - name: "CompTIA Cloud Essentials+"
                    short_name: "comptia-essentials"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=CompTIA+Cloud+Essentials%2B&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.programStreamStringArray=1248288&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.campusStringArray=0&courseSearch.filterString=availforreg"
                  - name: "Cybersecurity Analyst"
                    short_name: "cyber-analyst"
                    url: "https://www.mdc.edu/cybersecurity-analyst/"
                  - name: "Digital Marketing Specialist"
                    short_name: "dms"
                    url: "https://www.mdc.edu/digitalmarketing/"
                  - name: "Electricity Technician"
                    short_name: "electricity-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21302128&selectedProgramAreaId=13897149&selectedProgramStreamId=21246697"
                  - name: "Help Desk Support Technician"
                    short_name: "hdst"
                    url: "https://www.mdc.edu/itsupporttechnician"
                  - name: "Home Health Aide Training Certification"
                    short_name: "hha"
                    url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Home+Health+Aide+Training"
                  - name: "HVAC/R Technician"
                    short_name: "hvac-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304378&selectedProgramAreaId=13897149&selectedProgramStreamId=21246765"
                  - name: "Logistics and Transportation Specialist"
                    short_name: "lts"
                    url: "https://www.mdc.edu/transportationlogisticsspecialist"
                  - name: "Plumbing Technician"
                    short_name: "plumbing-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304609&selectedProgramAreaId=13897149&selectedProgramStreamId=21246779"
                  - name: "Telecommunications and Fiber Optics Technician"
                    short_name: "telecom-tech"
                    url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"

- id: "finder_dynamic"
 data:
 header_content:
 heading: "Educational Programs"
 heading_mobile: "Educational Programs"
 sub_heading: "Explore and discover the courses we offer. Choose the path that fits your goals!"
 sub_heading_mobile: "Explore and discover the courses we offer. Choose the path that fits your goals!"
 body_content:
 image_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/hat.svg"
 left_side:
 image_url: "https://storage.googleapis.com/mdc-website/iet/list_scroll_iet.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/iet/list_scroll_iet.png') }}"
 right_side:
 menu:
 - name: "ESOL Pathway"
 short_name: "esolpath"
 body_content:
 left_side:
 slug: "ESOL"
 image_url: "https://storage.googleapis.com/mdc-website/esol.es/esol_pathway_iet.svg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/esol.es/esol_pathway_iet.svg') }}"
 description: "The MDC ESOL program empowers non-native English speakers to achieve their goals by providing essential language skills."
 right_side:
 menu:
 - name: "Accounting and Budgeting"
 short_name: "ab"
 url: "https://www.mdc.edu/accountingbudgeting"
 - name: "Artificial Intelligence Awareness"
 short_name: "ai-awareness"
 url: "https://www.mdc.edu/aiawareness/"
 - name: "Artificial Intelligence Practitioner"
 short_name: "ai-practitioner"
 url: "https://www.mdc.edu/aipractitioner/"
 - name: "Business Entrepreneurship Specialist Start-Up Venture"
 short_name: "bes-suv"
 url: "https://www.mdc.edu/startupentrepreneurship/"
 - name: "Business Specialist - Business Management"
 short_name: "business-mgmt"
 url: "https://www.mdc.edu/managementspecialist/"
 - name: "Certified Billing & Coding Specialist"
 short_name: "cbcs"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Certified+Billing+and+Coding+Specialist&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.filterString=all"
 - name: "Certified Nursing Assistant (CNA)"
 short_name: "cna"
 url: "https://ce.mdc.edu/cna"
 - name: "Chef Apprentice"
 short_name: "ca"
 url: "https://www.mdc.edu/chefapprentice"
 - name: "Commercial Driver's License Class A"
 short_name: "cdl-a"
 url: "https://ce.mdc.edu/cdl"
 - name: "Commercial Driver's License Class B Truck Driver Heavy FL"
 short_name: "cdl-b"
 url: "https://www.mdc.edu/cdlb/"
 - name: "CompTIA Cloud Essentials+"
 short_name: "comptia-essentials"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=CompTIA+Cloud+Essentials%2B&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.programStreamStringArray=1248288&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.campusStringArray=0&courseSearch.filterString=availforreg"
 - name: "Cybersecurity Analyst"
 short_name: "cyber-analyst"
 url: "https://www.mdc.edu/cybersecurity-analyst/"
 - name: "Digital Marketing Specialist"
 short_name: "dms"
 url: "https://www.mdc.edu/digitalmarketing/"
 - name: "Educator Preparation Institute"
 short_name: "eps"
 url: "https://www.mdc.edu/educatorpreparation/"
 - name: "EKG Electrocardiography Technician"
 short_name: "ekg-tech"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=EKG+Technician+Certification"
 - name: "Electricity Technician"
 short_name: "electricity-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21302128&selectedProgramAreaId=13897149&selectedProgramStreamId=21246697"
 - name: "Food and Beverage Specialist"
 short_name: "fbs"
 url: "https://www.mdc.edu/foodbeveragespecialist"
 - name: "Help Desk Support Technician"
 short_name: "hdst"
 url: "https://www.mdc.edu/itsupporttechnician"
 - name: "Home Health Aide Training Certification"
 short_name: "hha"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Home+Health+Aide+Training"
 - name: "HVAC/R Technician"
 short_name: "hvac-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304378&selectedProgramAreaId=13897149&selectedProgramStreamId=21246765"
 - name: "Phlebotomy Technician"
 short_name: "pt"
 url: "https://www.mdc.edu/phlebotomy/"
 - name: "Plumbing Technician"
 short_name: "plumbing-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304609&selectedProgramAreaId=13897149&selectedProgramStreamId=21246779"
 - name: "Telecommunications and Fiber Optics Technician"
 short_name: "telecom-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"
 - name: "GED Pathway"
 short_name: "gedpath"
 body_content:
 left_side:
 slug: "GED"
 image_url: "https://storage.googleapis.com/mdc-website/iet/ged_pathway_iet.svg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/iet/ged_pathway_iet.svg') }}"
 description: "The GED program prepares you to earn a High School Equivalency Diploma, recognized by employers and colleges. It covers Language Arts, Math, Social Studies, and Science, ensuring you gain the skills of a high school graduate."
 right_side:
 menu:
 - name: "Accounting and Budgeting"
 short_name: "ab"
 url: "https://www.mdc.edu/accountingbudgeting"
 - name: "Artificial Intelligence Awareness"
 short_name: "ai-awareness"
 url: "https://www.mdc.edu/aiawareness/"
 - name: "Artificial Intelligence Practitioner"
 short_name: "ai-practitioner"
 url: "https://www.mdc.edu/aipractitioner/"
 - name: "Business Specialist - Business Management"
 short_name: "ab"
 url: "https://www.mdc.edu/managementspecialist"
 - name: "Certified Billing & Coding Specialist"
 short_name: "cbcs"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Certified+Billing+and+Coding+Specialist&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.filterString=all"
 - name: "Chef Apprentice"
 short_name: "ca"
 url: "https://www.mdc.edu/chefapprentice"
 - name: "Commercial Driver's License Class A"
 short_name: "cdl-a"
 url: "https://ce.mdc.edu/cdl"
 - name: "Commercial Driver's License Class B Truck Driver Heavy FL"
 short_name: "cdl-b"
 url: "https://www.mdc.edu/cdlb/"
 - name: "CompTIA Cloud Essentials+"
 short_name: "comptia-essentials"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=CompTIA+Cloud+Essentials%2B&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.programStreamStringArray=1248288&courseSearch.deliveryMethodString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.campusStringArray=0&courseSearch.filterString=availforreg"
 - name: "Cybersecurity Analyst"
 short_name: "cyber-analyst"
 url: "https://www.mdc.edu/cybersecurity-analyst/"
 - name: "Digital Marketing Specialist"
 short_name: "dms"
 url: "https://www.mdc.edu/digitalmarketing/"
 - name: "Electricity Technician"
 short_name: "electricity-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21302128&selectedProgramAreaId=13897149&selectedProgramStreamId=21246697"
 - name: "Help Desk Support Technician"
 short_name: "hdst"
 url: "https://www.mdc.edu/itsupporttechnician"
 - name: "Home Health Aide Training Certification"
 short_name: "hha"
 url: "https://ce.mdc.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&courseSearch.courseDescriptionKeyword=Home+Health+Aide+Training"
 - name: "HVAC/R Technician"
 short_name: "hvac-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304378&selectedProgramAreaId=13897149&selectedProgramStreamId=21246765"
 - name: "Logistics and Transportation Specialist"
 short_name: "lts"
 url: "https://www.mdc.edu/transportationlogisticsspecialist"
 - name: "Plumbing Technician"
 short_name: "plumbing-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21304609&selectedProgramAreaId=13897149&selectedProgramStreamId=21246779"
 - name: "Telecommunications and Fiber Optics Technician"
 short_name: "telecom-tech"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"

Offer

Feature section that displays service offerings with descriptive items and visual elements. The circle_image is decorative (empty alt, aria-hidden); only the main image carries an accessible name.

Main Example

- id: "offer"
  data:
    offer_items:
      - text: "Continuing education units (CEUs)"
      - text: "Comprehensive needs assessment"
      - text: "Certificates of completion"
      - text: "Live, online and blended instructional models"
      - text: "Customized, on-site seminars and workshops"
      - text: "Industry-recognized certifications"
      - text: "Subject matter experts and industry leaders"
    image:
      url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/chica_rigth.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/chica_rigth.png') }}"
    circle_image:
      url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/circle.png"

Marquee

Showcases partnerships, affiliations, or client relationships through a visually appealing logo display

Main Example

- id: "marquee"
  data:
    heading: "Who is hiring our students?"
    images:
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/google.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/google.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/meta.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/meta.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/google.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/google.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/meta.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/meta.svg') }}"

- id: "marquee"
  data:
    heading: "Who is hiring our students?"
    images:
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/google.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/google.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/meta.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/meta.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/google.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/google.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/microsoft.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/ebay.svg') }}"
      - image_url: "https://storage.googleapis.com/mdc-website/companies-badge/meta.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/companies-badge/meta.svg') }}"

Online Admission Button

Encourages user action with a prominent button that directs to an admissions or application form

Main Example

- id: "online_admission_button"
  data:
    heading: "Online Admission Form"
    heading_mobile: "Online <br /> Admission Form"
    sub_heading: "You can now submit important documents for your ESOL and/or GED admission application."
    primary_button:
      label: "Start your Application Process!"
      url: "https://mdcwap.mdc.edu/adulteducationadmission/"

Chips Languages

Language switcher component displaying available language versions as chip buttons

Main Example

- id: "chips_languages"
  data:
    languages:
      - name: "English"
        slug: "esol"
      - name: "Español"
        slug: "esol.es"
      - name: "Kreyol"
        slug: "esol.ht"

Sticky Call Bar V2

Sticky call-to-action bar v2 that bleeds over hero and becomes fixed at bottom on scroll. Enhanced version with improved ID isolation to support multiple instances. Automatically detects hero element and positions itself.

Main Example

- id: "sticky_call_bar_v2"
  data:
    text: "Contact our team"
    phone: "305-237-2161"
    email: "info@mdc.edu"

Sticky Call Bar

Sticky call-to-action bar that bleeds over hero and becomes fixed at bottom on scroll. Automatically detects hero element and positions itself.

Main Example

- id: "sticky_call_bar"
  data:
    text: "Call us for more information"
    phone: "305-237-2161"

Table Credits Section

Presents academic credits, course details, or program information in an organized table format with clear headings

Main Example

- id: "table_credits_section"
  data:
    heading: "Articulations from Industry </br> Certifications to Credit"
    mini_heading: "Transition Pathways"
    table:
      headers:
        - "Industry Certifications Earned"
        - "Articulated credit into AS Degree / CCC"
      rows:
        - ["CompTIA Network +", "4 Credits"]
        - [
            "Fiber Optics Association's Fiber Optics Installer (FOI)",
            "4 Credits",
          ]
        - [
            "Fiber Optics Association's Fiber Optics Technician (FOT)",
            "4 Credits",
          ]

Breadcrumb

Provides contextual navigation for users to understand their current location and easily navigate to parent pages

Main Example

- id: "breadcrumb"
  data:
    items:
      - label: "Home"
        url: "https://ce.mdc.edu"
      - label: "Adult Education"
        url_slug: "adult-education"

Navbar Summer

Provides a visually distinctive navigation for summer program pages with location-based navigation options

Main Example

- id: "navbar_summer"
  data:
    image:
      url: "https://storage.googleapis.com/mdc-website/summercamps/summer-logo.svg"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps/summer-logo.svg') }}"
    locations:
      - name: "Hialeah"
        url_slug: "hialeah-camps"
      - name: "Homestead"
        url_slug: "homestead-camps"
      - name: "Kendall"
        url_slug: "kendall-camps"
      - name: "Medical"
        url_slug: "medical-camps"
      - name: "North"
        url_slug: "north-camps"
      - name: "Padron"
        url_slug: "padron-camps"
      - name: "West"
        url_slug: "west-camps"
      - name: "Wolfson"
        url_slug: "wolfson-camps"
    classes:
      - "mb-5"

Discounts

Feature component that displays special discount or promotional offers with a call-to-action button. Designed to highlight time-sensitive promotions and exclusive deals.

Main Example

- id: "discounts"
  data:
    badge: "Special Offer"
    heading: "Early Registration Discount"
    description: "Sign up before <span class='discount-highlight'>December 18, 2025</span> and lock in an exclusive discounted rate of <span class='discount-highlight'>$150</span> per month from January through March 2026."
    primary_button:
      label: "Sign up today!"
      scroll_to_component: "price_cards_section"

Certificate Pathways

Displays a vertical timeline of academic pathways or steps.

Main Example

- id: "certificate_pathways"
  data:
    heading: "Academic Pathways"
    steps:
      - title: "Barrington Irving Technical Training School"
        image_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/BITTS-logo-130.png"
        courses:
          - "Fixed Base Operator (FBO)"
          - "Maintenance, Repair and Operation (MRO) technician"
        description: "At the BITTS program, students gain practical, industry-recognized training for careers as Fixed Base Operator (FBO) and Maintenance, Repair, and Operation (MRO) Technicians. These certificates prepare graduates for entry-level positions in airport operations, aircraft servicing, and aviation maintenance facilities, while also creating a pathway to Airframe and Powerplant (A&P) FAA certification."
      - title: "Miami Dade College"
        sub_title: "School of Continuing Education & Professional Development"
        image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
        courses:
          - "AMT - Airframe & Powerplant Technician"
        description: "At MDC, the Airframe and Powerplant (A&P) program provides comprehensive training for students to maintain and repair aircraft structures and engines through a balanced combination of classroom instruction and hands-on experience. Aligned with the Airman Certification Standards (ACS), the program delivers rigorous, practical training in Airframe and Powerplant systems. Students gain the knowledge and technical expertise needed to pass all Federal Aviation Administration (FAA) written, oral, and practical exams, graduating as highly skilled professionals ready to begin rewarding careers in the aviation industry."
      - title: ""
        sub_title: "School of Aviation"
        image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
        courses:
          - "AS – Aviation Maintenance Management"
        description: "This program offers a sequence of courses providing rigorous content aligned with academic standards and skills for careers in Transportation, Distribution, and Logistics. It prepares students for employment as supervisors or frontline managers in aviation maintenance, with opportunities in repair facilities and airline maintenance operations. The curriculum includes communication, leadership, task management, human relations, and safe work practices. Students must complete an Aviation Maintenance Technician (AMT) Airframe and Powerplant certification before finishing the degree. The program emphasizes technical proficiency, problem-solving, employability skills, and occupation-specific expertise."

- id: "certificate_pathways"
  data:
    heading: "Academic Pathways"
    steps:
      - title: "Barrington Irving Technical Training School"
        image_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/BITTS-logo-130.png"
        courses:
          - "Fixed Base Operator (FBO)"
          - "Maintenance, Repair and Operation (MRO) technician"
        description: "At the BITTS program, students gain practical, industry-recognized training for careers as Fixed Base Operator (FBO) and Maintenance, Repair, and Operation (MRO) Technicians. These certificates prepare graduates for entry-level positions in airport operations, aircraft servicing, and aviation maintenance facilities, while also creating a pathway to Airframe and Powerplant (A&P) FAA certification."
      - title: "Miami Dade College"
        sub_title: "School of Continuing Education & Professional Development"
        image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
        courses:
          - "AMT - Airframe & Powerplant Technician"
        description: "At MDC, the Airframe and Powerplant (A&P) program provides comprehensive training for students to maintain and repair aircraft structures and engines through a balanced combination of classroom instruction and hands-on experience. Aligned with the Airman Certification Standards (ACS), the program delivers rigorous, practical training in Airframe and Powerplant systems. Students gain the knowledge and technical expertise needed to pass all Federal Aviation Administration (FAA) written, oral, and practical exams, graduating as highly skilled professionals ready to begin rewarding careers in the aviation industry."
      - title: ""
        sub_title: "School of Aviation"
        image_url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
        courses:
          - "AS – Aviation Maintenance Management"
        description: "This program offers a sequence of courses providing rigorous content aligned with academic standards and skills for careers in Transportation, Distribution, and Logistics. It prepares students for employment as supervisors or frontline managers in aviation maintenance, with opportunities in repair facilities and airline maintenance operations. The curriculum includes communication, leadership, task management, human relations, and safe work practices. Students must complete an Aviation Maintenance Technician (AMT) Airframe and Powerplant certification before finishing the degree. The program emphasizes technical proficiency, problem-solving, employability skills, and occupation-specific expertise."

Certificate Two Images

Highlights a certificate or program credential with visual emphasis using a prominent image and supporting text

Main Example

- id: "certificate_two_images"
  data:
    heading: "Showcase your achievement with a <strong class='bold-600'>professional certificate</strong> from MDC"
    sub_heading: "Upon successfully completing your studies, receive a certificate from MDC School of Continuing Education and Professional Development, that validates your skills, helping you stand out in the job market and unlocking a world of opportunities."
    side_image:
      url: "https://storage.googleapis.com/mdc-website/english-program/certificate-english.svg"
      mobile_url: "https://storage.googleapis.com/mdc-website/english-program/mobile-finder-two.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program/certificate-english.svg') }}"

Soft Cta

End-of-page low-commitment CTA band for visitors who scrolled without converting. Centered heading, optional subheading, and dual buttons (primary + secondary). Use just before contact_form; keep copy softer than Apply Now / admission CTAs in the nav or hero.

Main Example

- id: "soft_cta"
  data:
    heading: "Not Sure Where to Start?"
    heading_mobile: "Not Sure Where to Start?"
    sub_heading: "Talk to an advisor or request more information — placeholder support copy."
    primary_button:
      label: "Talk to an Advisor"
      scroll_to_component: "contact_form"
    secondary_button:
      label: "Request Info"
      scroll_to_component: "contact_form"

About Program Simple

Simple content section with heading and one or multiple paragraphs describing the program.

Main Example

- id: "about_program_simple"
  data:
    heading: "About this program"
    content:
      - "This program prepares students with hands-on learning and industry-relevant skills."
      - "Classes are offered with flexible schedules and expert instructors."

Scholarships Form

Form for scholarship applications. When data.meta_info is present, include destiny_code and destiny_type aligned with the landing YAML header meta_info, plus lead_intent_key from LEAD_INTENT_CATALOG (typically scholarship-application).

Main Example

- id: "scholarships_form"
  data:
    heading: "Application for Google Career Certificates"
    sub_heading: "Please fill out this form to apply for the Google Career Certificates program. Ensure all required fields are completed."
    form_fields:
      name:
        enabled: true
        required: true
        label: "Name"
      last_name:
        enabled: true
        required: true
        label: "Last Name"
      phone:
        enabled: true
        required: true
        label: "Phone"
      email:
        enabled: true
        required: true
        label: "Email"
      date_of_birth:
        enabled: true
        required: false
        label: "Date of Birth"
      address:
        enabled: true
        required: false
        label: "Address"
      certificates_interest:
        enabled: true
        multiple: true
        label: "Which Google Career Certificate are you interested in?"
        options:
          - label: "Artificial Intelligence"
            value: "google-artificial-intelligence"
          - label: "Cybersecurity"
            value: "google-cybersecurity"
          - label: "Data Analytics"
            value: "google-data-analytics"
          - label: "Digital Marketing & E-commerce"
            value: "google-digital-marketing"
          - label: "IT Support"
            value: "google-it-support"
          - label: "Project Management"
            value: "google-project-management"
      motivation:
        enabled: true
        required: false
        label: "Why are you interested in this certificate?"
    meta_info:
      slug: "google-certificates"
      lead_intent_key: "scholarship-application"
      locations: ["ce-online"]
      destiny_code: ["CM000999"]
      destiny_type: "program_stream"

- id: "scholarships_form"
  data:
    heading: "Application for Google Career Certificates"
    sub_heading: "Please fill out this form to apply for the Google Career Certificates program. Ensure all required fields are completed."
    form_fields:
      name:
        enabled: true
        required: true
        label: "Name"
      last_name:
        enabled: true
        required: true
        label: "Last Name"
      phone:
        enabled: true
        required: true
        label: "Phone"
      email:
        enabled: true
        required: true
        label: "Email"
      date_of_birth:
        enabled: true
        required: false
        label: "Date of Birth"
      address:
        enabled: true
        required: false
        label: "Address"
      certificates_interest:
        enabled: true
        multiple: true
        label: "Which Google Career Certificate are you interested in?"
        options:
          - label: "Artificial Intelligence"
            value: "google-artificial-intelligence"
          - label: "Cybersecurity"
            value: "google-cybersecurity"
          - label: "Data Analytics"
            value: "google-data-analytics"
          - label: "Digital Marketing & E-commerce"
            value: "google-digital-marketing"
          - label: "IT Support"
            value: "google-it-support"
          - label: "Project Management"
            value: "google-project-management"
      motivation:
        enabled: true
        required: false
        label: "Why are you interested in this certificate?"
    meta_info:
      slug: "google-certificates"
      lead_intent_key: "scholarship-application"
      locations: ["ce-online"]
      destiny_code: ["CM000999"]
      destiny_type: "program_stream"

Syllabus Form

Enables lead generation by offering a program syllabus download in exchange for contact information. data.meta_info should include destiny_code and destiny_type aligned with the landing YAML header meta_info, plus lead_intent_key from LEAD_INTENT_CATALOG (typically download-syllabus).

Main Example

- id: "syllabus_form"
  data:
    pdf_url: "https://storage.googleapis.com/mdc-static/downloadables/data-visualization-tableau.pdf"
    heading: "Learn More About Our Program"
    sub_heading: "Fill out the form below to receive detailed information about our study program directly in your inbox."
    policy: "By completing this form, I agree that my information will be used to send me marketing information about Miami Dade College and 4Geeks Academy programs. Please review our <a class='underline txt-primary bold-500' href='https://www.mdc.edu/privacy/' target='_blank'>Privacy Policy</a>"
    primary_button:
      label: "Get program info"
    meta_info:
      slug: "data-visualization-tableau"
      lead_intent_key: "download-syllabus"
      locations: ["kendall"]
      destiny_code: ["CM000321"]
      destiny_type: "course"

Waiting List Form

Provides a form for users to join a waiting list for unavailable courses

⚠️ IMPORTANT: This component is NEVER used in YAML generation. It is dynamically integrated via JavaScript automatically when courses are unavailable. DO NOT include this component in any generated YAML files.

Main Example

- id: "waiting_list_form"
  data: {}
  params:
    slug: "data-analytics-certification"
    lead_intent_key: "join-waiting-list"
    destiny_code: ["CM000555"]
    destiny_type: "certificate"

Placement Test Form

Captures user information for enrollment in a placement test and redirects to assessment platform. data.meta_info should include destiny_code and destiny_type aligned with the landing YAML header meta_info, plus lead_intent_key from LEAD_INTENT_CATALOG when applicable.

Main Example

- id: "placement_test_form"
  data:
    heading: "English Placement Test"
    sub_heading: "This test is designed to accurately assess your current level of English, whether you're a beginner or an advanced speaker. To get started, please enter your information and select your preferred campus location to take your courses, then click the button to begin the test."
    primary_button:
      label: "Start test!"
    meta_info:
      slug: "intensive-english-stream"
      lead_intent_key: "request-placement-test"
      locations:
        [
          "padron",
          "hialeah",
          "kendall",
          "north",
          "west",
          "wolfson",
          "aventura-center",
          "homestead",
          "ce-online",
        ]
      destiny_code: ["CM000789"]
      destiny_type: "program_stream"

Contact Form

Collects user contact information and program interests with supporting details. The form supports an optional Company Name input saved in lead additional_info as [company_name]=<value>. By default, this field is not rendered and is only shown when data.company_field is provided in YAML. Any lead-submitting form should populate data.meta_info with Destiny linkage (destiny_code + destiny_type) aligned with the landing YAML header meta_info, plus lead_intent_key from the frontend catalog when applicable.

Main Example

- id: "contact_form"
  data:
    heading: "Looking for more <br /> information?"
    sub_heading: "To obtain more information about the English Program, please contact the School of Continuing Education and Professional Development at Miami Dade College by completing the form below or visiting our offices at any of the campuses."
    details:
      - icon: "https://storage.googleapis.com/mdc-website/4geeks-cursos/phone.svg"
        text: "305-237-0651"
    meta_info:
      slug: "english-program"
      lead_intent_key: "request-more-info"
      locations:
        [
          "aventura",
          "hialeah",
          "homestead",
          "kendall",
          "north",
          "padron",
          "west",
          "wolfson",
        ]
      courses_to_show:
        ["intensive-english", "english-conversation", "english-specialty"]
      destiny_code: ["CM000123"]
      destiny_type: "program_stream"

Component Versions

Standard

Basic contact form for program information with location targeting

- id: "contact_form"
  data:
    heading: "Looking for more <br /> information?"
    sub_heading: "To obtain more information about the English Program, please contact the School of Continuing Education and Professional Development at Miami Dade College by completing the form below or visiting our offices at any of the campuses."
    details:
      - icon: "https://storage.googleapis.com/mdc-website/4geeks-cursos/phone.svg"
        text: "305-237-0651"
    meta_info:
      slug: "english-program"
      lead_intent_key: "request-more-info"
      locations: ["aventura", "hialeah", "homestead", "kendall", "north", "padron", "west", "wolfson"]
      courses_to_show: ["intensive-english", "english-conversation", "english-specialty"]
      destiny_code: ["CM000123"]
      destiny_type: "program_stream"

With Questions Field

Contact form with additional custom questions field for comments and specific inquiries

- id: "contact_form"
  data:
    heading: "Looking for more <br /> information?"
    sub_heading: "For more information about this Camp please contact us <br/> directly or complete the form below with your information."
    details:
      - icon: "https://storage.googleapis.com/mdc-website/4geeks-cursos/phone.svg"
        text: "305-237-2161"
      - icon: "https://storage.googleapis.com/mdc-website/4geeks-cursos/location.svg"
        text: "11011 SW 104 St. Room 5130, Miami, FL 33176"
    questions_field:
      label: "Questions / Comments"
      placeholder: "Enter your questions or comments here"
    meta_info:
      slug: "kids-and-teens-college"
      lead_intent_key: "request-more-info"
      locations: ["kendall"]
      destiny_code: ["CM000456"]
      destiny_type: "content_piece"

Program Cards Expandable

Grid of program/category cards with icon and title only (no description), and a centered expand/collapse button to show more cards. Set expand_button.enabled to false to drop the toggle and render every card at once. Icons are decorative (empty alt, aria-hidden) and are excluded from accessible name content. Each card links via program_url.

Main Example

- id: "program_cards_expandable"
  data:
    heading: "Our Programs"
    initial_visible_count: 8
    initial_visible_count_mobile: 4
    expand_button:
      enabled: true
      more_label: "MORE PROGRAMS"
      less_label: "LESS"
    features:
      - title: "Business"
        image_url: "https://storage.googleapis.com/mdc-website/mdc-why_choose_mdc/briefcase.svg"
        program_url: "https://ce.mdc.edu/business"
      - title: "Technology"
        image_url: "https://storage.googleapis.com/mdc-website/mdc-why_choose_mdc/handshake.svg"
        program_url: "https://ce.mdc.edu/technology"

Credibility Strip

Post-hero credibility strip: 2–4 white rounded cards with a large statistic and short label (no heading, icons, or CTA). Place immediately after the hero to reassure first-time visitors.

Main Example

- id: "credibility_strip"
  data:
    items:
      - value: "40,000+"
        label: "Students Served Annually"
      - value: "10"
        label: "Campuses and Outreach Centers"
      - value: "300+"
        label: "Program Offered"

Shifts Schedules

Presents filterable course schedules divided by age group and week for summer camps

Main Example

- id: "shifts_schedules"
  data:
    heading: "Build Your Kids and Teen College<br />Experience"
    sub_heading: "Start by choosing an age group and a week that works for you. <br/> Then, pick a full-day program or mix morning and afternoon activities to create the perfect schedule."
    age_groups:
      - range: "7-9"
      - range: "10-12"
      - range: "13-17"
    available_weeks:
      - number: 1
        dates: "6/9 - 6/13"
      - number: 2
        dates: "6/16 - 6/20"
      - number: 3
        dates: "6/23 - 6/27"
      - number: 4
        dates: "6/30 - 7/3"
      - number: 5
        dates: "7/8 - 7/11"
      - number: 6
        dates: "7/14 - 7/18"
      - number: 7
        dates: "7/21 - 7/25"
      - number: 8
        dates: "7/28 - 8/1"
    certificates:
      - id: "w1-79"
        certificate_id: "25614651"
      - id: "w1-1012"
        certificate_id: "25624780"
      - id: "w1-1317"
        certificate_id: "25626414"
      - id: "w2-79"
        certificate_id: "25622889"
      - id: "w2-1012"
        certificate_id: "25625024"
      - id: "w2-1317"
        certificate_id: "25626559"
      - id: "w3-79"
        certificate_id: "25623027"
      - id: "w3-1012"
        certificate_id: "25625762"
      - id: "w3-1317"
        certificate_id: "25626670"
      - id: "w4-79"
        certificate_id: "25623818"
      - id: "w4-1012"
        certificate_id: "25625944"
      - id: "w4-1317"
        certificate_id: "25626697"
      - id: "w5-79"
        certificate_id: "25624158"
      - id: "w5-1012"
        certificate_id: "25626029"
      - id: "w5-1317"
        certificate_id: "25626767"
      - id: "w6-79"
        certificate_id: "25624391"
      - id: "w6-1012"
        certificate_id: "25626158"
      - id: "w6-1317"
        certificate_id: "25626973"
      - id: "w7-79"
        certificate_id: "25624546"
      - id: "w7-1012"
        certificate_id: "25626271"
      - id: "w7-1317"
        certificate_id: "25627063"
      - id: "w8-1012"
        certificate_id: "25626374"
      - id: "w8-1317"
        certificate_id: "25627102"
    am_courses:
      - title: "Collage and Mixed Media"
        description: "Kids will begin to gain an understanding of basic art techniques while learning how to be expressive using a variety of materials."
        age_range: "7-9"
        course_id: "3899893"
        price: "$125.00"
        weeks: [8]
        week_checkbox_id:
          8: "22805444"
      - title: "LEGO Robotics: BricQ Motion Essential"
        description: "This class is an introduction to building and programming robots using the LEGO EV3 Robotics system. Students will learn mechanical design, construction, programming and teamwork skills."
        age_range: "7-9"
        course_id: "3890233"
        price: "$125.00"
        weeks: [8]
        week_checkbox_id:
          8: "22805227"
      - title: "Portrait Drawing: Black & White to Color"
        description: "Do you love faces but have trouble drawing them, even though you can draw other things well? In this intro to portrait drawing, students will learn to really see and understand the portrait as a 3-dimensional form."
        age_range: "10-12"
        course_id: "1158759"
        price: "$125.00"
        weeks: [8]
        week_checkbox_id:
          8: "22950776"
      - title: "SAT Math Preparation"
        description: "Review the math skills presented in this standardized test, and learn tips, strategies and techniques."
        age_range: "13-17"
        course_id: "3902554"
        price: "$125.00"
        weeks: [8]
        week_checkbox_id:
          8: "22952998"
    pm_courses:
      - title: "Clay Creations"
        description: "Using Magic Clay students will create colorful, three dimensional figurines. Throughout hands on activities, students will develop sculpting skills and techniques."
        age_range: "10-12"
        course_id: "1158659"
        price: "$125.00"
        weeks: [8]
        week_checkbox_id:
          8: "22952093"
      - title: "LEGO Motorized Mechanism"
        description: "Students will learn basic principles of design technology, science and mathematics through a series of hands-on activities."
        age_range: "10-12"
        course_id: "1158882"
        price: "$125.00"
        weeks: [8]
        week_checkbox_id:
          8: "22951193"
      - title: "Acting"
        description: "This class is ideal to teens interested in Acting, Musical Theatre, Dance and Body Language, Storytelling, Oral Interpretation, and Singing, among others."
        age_range: "13-17"
        course_id: "3889182"
        price: "$125.00"
        weeks: [8]

- id: "shifts_schedules"
 data:
 heading: "Build Your Kids and Teen College Experience"
 sub_heading: "Start by choosing an age group and a week that works for you. Then, pick a full-day program or mix morning and afternoon activities to create the perfect schedule."
 age_groups:
 - range: "7-9"
 - range: "10-12"
 - range: "13-17"
 available_weeks:
 - number: 1
 dates: "6/9 - 6/13"
 - number: 2
 dates: "6/16 - 6/20"
 - number: 3
 dates: "6/23 - 6/27"
 - number: 4
 dates: "6/30 - 7/3"
 - number: 5
 dates: "7/8 - 7/11"
 - number: 6
 dates: "7/14 - 7/18"
 - number: 7
 dates: "7/21 - 7/25"
 - number: 8
 dates: "7/28 - 8/1"
 certificates:
 - id: "w1-79"
 certificate_id: "25614651"
 - id: "w1-1012"
 certificate_id: "25624780"
 - id: "w1-1317"
 certificate_id: "25626414"
 - id: "w2-79"
 certificate_id: "25622889"
 - id: "w2-1012"
 certificate_id: "25625024"
 - id: "w2-1317"
 certificate_id: "25626559"
 - id: "w3-79"
 certificate_id: "25623027"
 - id: "w3-1012"
 certificate_id: "25625762"
 - id: "w3-1317"
 certificate_id: "25626670"
 - id: "w4-79"
 certificate_id: "25623818"
 - id: "w4-1012"
 certificate_id: "25625944"
 - id: "w4-1317"
 certificate_id: "25626697"
 - id: "w5-79"
 certificate_id: "25624158"
 - id: "w5-1012"
 certificate_id: "25626029"
 - id: "w5-1317"
 certificate_id: "25626767"
 - id: "w6-79"
 certificate_id: "25624391"
 - id: "w6-1012"
 certificate_id: "25626158"
 - id: "w6-1317"
 certificate_id: "25626973"
 - id: "w7-79"
 certificate_id: "25624546"
 - id: "w7-1012"
 certificate_id: "25626271"
 - id: "w7-1317"
 certificate_id: "25627063"
 - id: "w8-1012"
 certificate_id: "25626374"
 - id: "w8-1317"
 certificate_id: "25627102"
 am_courses:
 - title: "Collage and Mixed Media"
 description: "Kids will begin to gain an understanding of basic art techniques while learning how to be expressive using a variety of materials."
 age_range: "7-9"
 course_id: "3899893"
 price: "$125.00"
 weeks: [8]
 week_checkbox_id:
 8: "22805444"
 - title: "LEGO Robotics: BricQ Motion Essential"
 description: "This class is an introduction to building and programming robots using the LEGO EV3 Robotics system. Students will learn mechanical design, construction, programming and teamwork skills."
 age_range: "7-9"
 course_id: "3890233"
 price: "$125.00"
 weeks: [8]
 week_checkbox_id:
 8: "22805227"
 - title: "Portrait Drawing: Black & White to Color"
 description: "Do you love faces but have trouble drawing them, even though you can draw other things well? In this intro to portrait drawing, students will learn to really see and understand the portrait as a 3-dimensional form."
 age_range: "10-12"
 course_id: "1158759"
 price: "$125.00"
 weeks: [8]
 week_checkbox_id:
 8: "22950776"
 - title: "SAT Math Preparation"
 description: "Review the math skills presented in this standardized test, and learn tips, strategies and techniques."
 age_range: "13-17"
 course_id: "3902554"
 price: "$125.00"
 weeks: [8]
 week_checkbox_id:
 8: "22952998"
 pm_courses:
 - title: "Clay Creations"
 description: "Using Magic Clay students will create colorful, three dimensional figurines. Throughout hands on activities, students will develop sculpting skills and techniques."
 age_range: "10-12"
 course_id: "1158659"
 price: "$125.00"
 weeks: [8]
 week_checkbox_id:
 8: "22952093"
 - title: "LEGO Motorized Mechanism"
 description: "Students will learn basic principles of design technology, science and mathematics through a series of hands-on activities."
 age_range: "10-12"
 course_id: "1158882"
 price: "$125.00"
 weeks: [8]
 week_checkbox_id:
 8: "22951193"
 - title: "Acting"
 description: "This class is ideal to teens interested in Acting, Musical Theatre, Dance and Body Language, Storytelling, Oral Interpretation, and Singing, among others."
 age_range: "13-17"
 course_id: "3889182"
 price: "$125.00"
 weeks: [8]

Why Choose Mdc

Showcases key institutional features in a structured grid layout with visual and textual elements. Feature icons are decorative (empty alt, aria-hidden) and are excluded from accessible name content; title and description carry meaning.

Main Example

- id: "why_choose_mdc"
  data:
    heading: "Why choose MDC's <br/> AMT Program"
    heading_mobile: "Why choose MDC's <br/> AMT Program"
    center_content: true
    features:
      - title: "FAA-Certified"
        image_url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description: "Our curriculum is fully approved by the Federal Aviation Administration and aligns with the Airman Certification Standards (ACS), ensuring you receive a top-tier education recognized by employers nationwide."
      - title: "Comprehensive, Hands-On Training"
        image_url: "https://storage.googleapis.com/mdc-website/aviation-streams/wrench-tool.png"
        description: "Move beyond the textbook and get your hands on real aircraft components. Our program combines essential aviation theory with practical, project-based training in our state-of-the-art labs."
      - title: "Master the Core of Aviation"
        image_url: "https://storage.googleapis.com/mdc-website/aviation-streams/compass-navigator.png"
        description: "Develop a complete skill set by mastering the three pillars of aircraft maintenance required for FAA licensure: General, Airframe, and Powerplant systems."
      - title: "Prepared for Certification and Career"
        image_url: "https://storage.googleapis.com/mdc-website/mdc-why_choose_mdc/briefcase.svg"
        description: "Get deep technical knowledge and procedural confidence to succeed in all FAA written, oral, and practical exams, leading directly to your Airframe and/or Powerplant Mechanic certifications."

- id: "why_choose_mdc"
 data:
 heading: "Why choose MDC's AMT Program"
 heading_mobile: "Why choose MDC's AMT Program"
 center_content: true
 features:
 - title: "FAA-Certified"
 image_url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
 description: "Our curriculum is fully approved by the Federal Aviation Administration and aligns with the Airman Certification Standards (ACS), ensuring you receive a top-tier education recognized by employers nationwide."
 - title: "Comprehensive, Hands-On Training"
 image_url: "https://storage.googleapis.com/mdc-website/aviation-streams/wrench-tool.png"
 description: "Move beyond the textbook and get your hands on real aircraft components. Our program combines essential aviation theory with practical, project-based training in our state-of-the-art labs."
 - title: "Master the Core of Aviation"
 image_url: "https://storage.googleapis.com/mdc-website/aviation-streams/compass-navigator.png"
 description: "Develop a complete skill set by mastering the three pillars of aircraft maintenance required for FAA licensure: General, Airframe, and Powerplant systems."
 - title: "Prepared for Certification and Career"
 image_url: "https://storage.googleapis.com/mdc-website/mdc-why_choose_mdc/briefcase.svg"
 description: "Get deep technical knowledge and procedural confidence to succeed in all FAA written, oral, and practical exams, leading directly to your Airframe and/or Powerplant Mechanic certifications."

Certificate Partners Section

Displays a grid of flip cards showcasing partners with flippable card animation

Main Example

- id: "certificate_partners_section"
  data:
    heading: "Our Partners"
    cards:
      - badge: "Educational"
        front_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/BITTS-logo-small.png"
        back_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/BITTS-logo.png"
        back_text: "The Barrington Irving Technical Training School empowers individuals and strengthens the community through high-quality aviation and STEM education. Inspired by Captain Barrington Irving, its mission is to prepare a skilled workforce for the aviation, transportation, and manufacturing industries."
      - badge: "Educational"
        front_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/experience-aviation-logo-small.png"
        back_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/experience-aviation-logo.png"
        back_text: "Experience Aviation is a nonprofit organization that leverages aviation to develop students' STEM skills. Its mission is to address the shortage of STEM professionals by engaging youth in hands-on, industry-related challenges."
      - badge: "Employer"
        front_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/arr-logo-small.png"
        back_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/arr-logo.png"
        back_text: "AAR is a global, independent provider of aviation services for commercial and government clients. Through its aftermarket expertise and award-winning solutions, AAR helps organizations enhance efficiency, lower costs, and uphold the highest standards of quality, service, and safety."

- id: "certificate_partners_section"
  data:
    heading: "Our Partners"
    cards:
      - badge: "Educational"
        front_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/BITTS-logo-small.png"
        back_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/BITTS-logo.png"
        back_text: "The Barrington Irving Technical Training School empowers individuals and strengthens the community through high-quality aviation and STEM education. Inspired by Captain Barrington Irving, its mission is to prepare a skilled workforce for the aviation, transportation, and manufacturing industries."
      - badge: "Educational"
        front_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/experience-aviation-logo-small.png"
        back_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/experience-aviation-logo.png"
        back_text: "Experience Aviation is a nonprofit organization that leverages aviation to develop students' STEM skills. Its mission is to address the shortage of STEM professionals by engaging youth in hands-on, industry-related challenges."
      - badge: "Employer"
        front_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/arr-logo-small.png"
        back_logo_url: "https://storage.googleapis.com/mdc-website/aviation-streams_aviation-maintenance-tech/arr-logo.png"
        back_text: "AAR is a global, independent provider of aviation services for commercial and government clients. Through its aftermarket expertise and award-winning solutions, AAR helps organizations enhance efficiency, lower costs, and uphold the highest standards of quality, service, and safety."

Why Choose Mdc Minimal

Presents features in a clean centered grid layout with icons and optional call-to-action button. Card icons are decorative (empty alt, aria-hidden) and are excluded from accessible content; title and description carry meaning.

Main Example

- id: "why_choose_mdc_minimal"
  data:
    heading: "Florida Labor Data"
    grid_section:
      cards:
        - title: "20,930"
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct4-icon.png"
          description: "Job vacancies"
        - title: "4.1%"
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct3-icon.png"
          description: "Annual growth in the area"
        - title: "$61,000"
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct2-icon.png"
          description: "Earnings in the area"
        - title: ""
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct1-icon.png"
          description: "MasTec, Moldcable, Randstad, Koscom Cable, Ductmaster"
    primary_button:
      label: "Download PDF"
      url: "https://ce.mdc.edu/custom/uploads/course-catalog/lightcast-telecom-technicians.pdf"

- id: "why_choose_mdc_minimal"
  data:
    heading: "Florida Labor Data"
    grid_section:
      cards:
        - title: "20,930"
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct4-icon.png"
          description: "Job vacancies"
        - title: "4.1%"
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct3-icon.png"
          description: "Annual growth in the area"
        - title: "$61,000"
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct2-icon.png"
          description: "Earnings in the area"
        - title: ""
          icon_url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/ct1-icon.png"
          description: "MasTec, Moldcable, Randstad, Koscom Cable, Ductmaster"
    primary_button:
      label: "Download PDF"
      url: "https://ce.mdc.edu/custom/uploads/course-catalog/lightcast-telecom-technicians.pdf"

Meet The Coaches Expandable

Showcases educational programs in a card-based grid layout with expandable cards that reveal detailed descriptions when clicked

Main Example

- id: "meet_the_coaches_expandable"
  data:
    heading: "Meet The Coaches"
    heading_mobile: "Meet The <br/> Coaches"
    sub_heading: "Conoce a nuestros entrenadores profesionales"
    programs:
      - title: "John Smith"
        name: "JOHN"
        description: "Con más de 15 años de experiencia en entrenamiento deportivo, John se especializa en desarrollo de fuerza y acondicionamiento físico. Ha trabajado con atletas de élite y es certificado en múltiples disciplinas. Su enfoque personalizado ayuda a cada atleta a alcanzar su máximo potencial."
        image_url: "https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg') }}"
        learn_more_button:
          label: "Ver perfil completo"
          url: "https://example.com/coach/john-smith"
      - title: "Maria Garcia"
        name: "MARIA"
        description: "Maria es especialista en nutrición deportiva y entrenamiento funcional. Con una maestría en Ciencias del Deporte, ha ayudado a cientos de atletas a mejorar su rendimiento a través de programas personalizados de nutrición y ejercicio. Su pasión es hacer que el fitness sea accesible para todos."
        image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg') }}"
        learn_more_button:
          label: "Contactar"
          url: "https://example.com/coach/maria-garcia"
      - title: "David Lee"
        name: "DAVID"
        description: "David es experto en rehabilitación deportiva y prevención de lesiones. Con formación en fisioterapia y kinesiología, desarrolla programas específicos para atletas que se recuperan de lesiones o buscan prevenir problemas futuros. Su enfoque holístico integra movimiento, recuperación y bienestar mental."
        image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg') }}"
        learn_more_button:
          label: "Ver perfil completo"
          url: "https://example.com/coach/david-lee"

- id: "meet_the_coaches_expandable"
 data:
 heading: "Meet The Coaches"
 heading_mobile: "Meet The Coaches"
 sub_heading: "Conoce a nuestros entrenadores profesionales"
 programs:
 - title: "John Smith"
 name: "JOHN"
 description: "Con más de 15 años de experiencia en entrenamiento deportivo, John se especializa en desarrollo de fuerza y acondicionamiento físico. Ha trabajado con atletas de élite y es certificado en múltiples disciplinas. Su enfoque personalizado ayuda a cada atleta a alcanzar su máximo potencial."
 image_url: "https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg') }}"
 learn_more_button:
 label: "Ver perfil completo"
 url: "https://example.com/coach/john-smith"
 - title: "Maria Garcia"
 name: "MARIA"
 description: "Maria es especialista en nutrición deportiva y entrenamiento funcional. Con una maestría en Ciencias del Deporte, ha ayudado a cientos de atletas a mejorar su rendimiento a través de programas personalizados de nutrición y ejercicio. Su pasión es hacer que el fitness sea accesible para todos."
 image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg') }}"
 learn_more_button:
 label: "Contactar"
 url: "https://example.com/coach/maria-garcia"
 - title: "David Lee"
 name: "DAVID"
 description: "David es experto en rehabilitación deportiva y prevención de lesiones. Con formación en fisioterapia y kinesiología, desarrolla programas específicos para atletas que se recuperan de lesiones o buscan prevenir problemas futuros. Su enfoque holístico integra movimiento, recuperación y bienestar mental."
 image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg') }}"
 learn_more_button:
 label: "Ver perfil completo"
 url: "https://example.com/coach/david-lee"

Program Offering

Showcases educational programs in a card-based grid layout with details and action links

Main Example

- id: "program_offering"
  data:
    heading: "Program Offering"
    heading_mobile: "Program <br/> Offering"
    programs:
      - title: "English for Speakers of Other Languages"
        name: "ESOL"
        description: "TDesigned for non-native English speakers, our ESOL program helps you improve your English language skills in reading, writing, listening, and speaking. Whether for personal growth, career advancement, or further academic pursuits, ESOL is your gateway to better communication."
        image_url: "https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg') }}"
        learn_more_button:
          label: "Learn more"
          url: " https://ce.mdc.edu/contentManagement.do?method=load&code=CM000061"
      - title: "Vocational English"
        name: "REVEST"
        description: "The REVEST program, for asylees, refugees, Cuban/Haitian entrants, and beneficiaries of humanitarian parole and victims of trafficking, helps you achieve your personal, academic and professional goals by providing educational and other support services. The REVEST program offers free English as a Second Language (VESOL) options, including the cost of books."
        image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg') }}"
        learn_more_button:
          label: "Learn more"
          url: "https://www.mdc.edu/revest"
      - title: "Intensive English Program"
        name: "INTENSIVE"
        description: "Whether you are a beginner or looking to improve your communication skills, the Intensive English program offers convenient class times, competitive cost, and a variety of teaching methods to enhance your learning. The goal of these classes is to accelerate fluency, improve English pronunciation and expand vocabulary and idiomatic phrases."
        image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg') }}"
        learn_more_button:
          label: "Learn more"
          url: " https://ce.mdc.edu/public/category/programStream.do?method=load&selectedProgramAreaId=25015835&selectedProgramStreamId=25015841"

- id: "program_offering"
 data:
 heading: "Program Offering"
 heading_mobile: "Program Offering"
 programs:
 - title: "English for Speakers of Other Languages"
 name: "ESOL"
 description: "TDesigned for non-native English speakers, our ESOL program helps you improve your English language skills in reading, writing, listening, and speaking. Whether for personal growth, career advancement, or further academic pursuits, ESOL is your gateway to better communication."
 image_url: "https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-program_offering/p2.jpeg') }}"
 learn_more_button:
 label: "Learn more"
 url: " https://ce.mdc.edu/contentManagement.do?method=load&code=CM000061"
 - title: "Vocational English"
 name: "REVEST"
 description: "The REVEST program, for asylees, refugees, Cuban/Haitian entrants, and beneficiaries of humanitarian parole and victims of trafficking, helps you achieve your personal, academic and professional goals by providing educational and other support services. The REVEST program offers free English as a Second Language (VESOL) options, including the cost of books."
 image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-two_w300.jpeg') }}"
 learn_more_button:
 label: "Learn more"
 url: "https://www.mdc.edu/revest"
 - title: "Intensive English Program"
 name: "INTENSIVE"
 description: "Whether you are a beginner or looking to improve your communication skills, the Intensive English program offers convenient class times, competitive cost, and a variety of teaching methods to enhance your learning. The goal of these classes is to accelerate fluency, improve English pronunciation and expand vocabulary and idiomatic phrases."
 image_url: "https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/learn-english-v2/po-one_w300.jpeg') }}"
 learn_more_button:
 label: "Learn more"
 url: " https://ce.mdc.edu/public/category/programStream.do?method=load&selectedProgramAreaId=25015835&selectedProgramStreamId=25015841"

Hero Gradient Right

Hero with right-side gradient overlay, optional certificate badge, heading, subheading, bullet list, and primary button.

Main Example

- id: "hero_gradient_right"
  data:
    certificate_badge:
      text: "Certificate"
    heading: "Become a Certified iOS Developer"
    sub_heading: "Master Swift, Xcode, and Mobile App Creation to Launch Your Career."
    description:
      - text: "Learn industry-standard programming and design concepts to create, deploy, and manage professional mobile applications for iPhones, iPads, and all Apple devices."
    background_image:
      url: "https://storage.googleapis.com/mdc-website/media-gallery/c196ced7a9a24234be01f4dc9c45a9cf.png"
      alt: "iOS Development"
    background_image_mobile:
      url: "https://storage.googleapis.com/mdc-website/media-gallery/9ba3a37f81c14949be8ff3eae0df5638.png"
      alt: "iOS Development Mobile"
    primary_button:
      label: "Enroll Today!"
      url: "https://ce.mdc.edu/apply"

Hero Certificate Landing Page

Certificate-focused hero with background image (required), optional muted looping background video from GCS, title, supporting copy, and either a searchbar or CTA button. Themes: blue (default, CE home Figma) or light (certificate program landings).

Main Example

- id: "hero_certificate_landing_page"
  data:
    theme: blue
    heading: "PREPARING FOR THE FUTURE"
    sub_heading: "The most efficient pathway towards a successful <br/> and fulfilling career"
    sub_heading_mobile: "The most efficient pathway <br/> towards a successful <br/> and fulfilling career"
    background_image:
      url: "https://storage.googleapis.com/mdc-website/media-gallery/2d39060dd87d404185a3d0d6a4c5b195.png"
      mobile_url: "https://storage.googleapis.com/mdc-website/media-gallery/61a6debf23be4f959bd67947520b160c.jpg"
      alt: "Students in a Continuing Education classroom at Miami Dade College"
    background_video:
      url: "https://storage.googleapis.com/mdc-website/media-gallery/6bce65de271e4f51b81eb1938c939faa.mp4"
      mobile_url: "https://storage.googleapis.com/mdc-website/media-gallery/51e67488d57e4665acee147da0bb8789.mp4"
      type: "video/mp4"
    searchbar:
      placeholder: "Search our programs"
      aria_label: "Search our programs"

Hero Streams One Image

Hero component specifically designed for program streams with a prominent tag, heading, description, CTA button, and a single image on the right. Ideal for showcasing program offerings with a professional, modern layout.

Main Example

- id: "hero_streams_one_image"
  data:
    tag: "Childcare Program"
    heading: "Transform your passion into a <strong class='bold-700'>Rewarding Career</strong>"
    sub_heading: "Get the training, certifications, and hands-on skills you need to become a childcare provider or advance your career. Learn essential topics that strengthen teaching skills and support professional growth in early childhood education."
    primary_button:
      label: "Contact us"
      scroll_to_component: "contact_form"
    side_image:
      url: "https://storage.googleapis.com/mdc-website/childcare-area_child-care-training/hero-childcare-2.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/childcare-area_child-care-training/hero-childcare-2.png') }}"

Hero Syllabus Modal

Comprehensive course view with detailed information and enrollment options

Main Example

- id: "hero_syllabus_modal"
  data:
    content_section:
      heading: "<strong class='bold-700'>Master the art of Judo</strong> at Miami Dade College"
      sub_heading: "In collaboration with <strong class='bold-700'>JudoToday</strong>"
      description:
        - text: "Dynamic classes designed for children ages 8-11"
        - text: "Develop coordination, balance, strength, and confidence"
        - text: "Learn valuable life skills like discipline, respect, and self-control"
        - text: "Improve physical fitness and social skills in a safe environment"
      partner_logo_badge:
        url: "https://storage.googleapis.com/mdc-website/judo-courses_intensive-judo/jutoToday-logo.svg"
        alt: "JudoToday logo"
        text: "In collaboration with <strong class='bold-700'>JudoToday</strong>"
        link: ""
      classes:
        - "py-md-0 py-4"
    card_section:
      heading: "Enroll Now"
      sub_heading: "Give your child the gift of Judo - sign up today or request more information!"
      primary_button:
        label: "Enroll now"
        scroll_to_component: "price_cards_section"

- id: "hero_syllabus_modal"
 data:
 content_section:
 heading: "Master the art of Judo at Miami Dade College"
 sub_heading: "In collaboration with JudoToday"
 description:
 - text: "Dynamic classes designed for children ages 8-11"
 - text: "Develop coordination, balance, strength, and confidence"
 - text: "Learn valuable life skills like discipline, respect, and self-control"
 - text: "Improve physical fitness and social skills in a safe environment"
 partner_logo_badge:
 url: "https://storage.googleapis.com/mdc-website/judo-courses_intensive-judo/jutoToday-logo.svg"
 alt: "JudoToday logo"
 text: "In collaboration with JudoToday"
 link: ""
 classes:
 - "py-md-0 py-4"
 card_section:
 heading: "Enroll Now"
 sub_heading: "Give your child the gift of Judo - sign up today or request more information!"
 primary_button:
 label: "Enroll now"
 scroll_to_component: "price_cards_section"

Component Versions

Basic Version

Hero section with dual-panel layout featuring course information and enrollment call-to-action

- id: "hero_syllabus_modal"
  data:
    content_section:
      heading: "Take the first step towards a bright <strong class='bold-700'>Financial Future!</strong>"
      ad_text: "In this 3-hour seminar, you'll unlock the secrets to mastering your finances and building a solid financial foundation."
      classes:
        - "py-md-5 py-5"
    card_section:
      heading: "Join now"
      sub_heading: "Enroll in this course today! or request more information completing the form below."
      primary_button:
        label: "Enroll now"
        scroll_to_component: "price_cards_section"

Hero Three Images

Hero section with main content and three images layout. Use when multiple distinct images need to be showcased prominently.

Main Example

- id: "hero_three_images"
  data:
    heading: "We Mean Business!"
    right_image:
      url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/definitiva.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/definitiva.png') }}"
    right_image_mobile:
      url: "https://storage.googleapis.com/mdc-website/center-corporate-solutions/mobile-definitive.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/center-corporate-solutions/mobile-definitive.png') }}"
    description:
      - text: "Investing in employee development boosts business performance, staff morale, and long-term growth. MDC offers customized corporate training solutions, led by industry experts, to enhance productivity and achieve organizational goals"
    primary_button:
      label: "Contact us!"
      scroll_to_component: "contact_form"

Hero One Image

Creates a strong visual impact with headline and call-to-action

Main Example

- id: "hero_one_image"
  data:
    heading: "<strong class='bold-700'>GATE Program</strong> <br/> Your Pathway to Success!"
    sub_heading: "Earn your GED and a vocational credential simultaneously in fields like health care, business, hospitality, or technology while you benefit from experienced instructors, hands-on training, and academic and career support."
    right_image:
      url: "https://storage.googleapis.com/mdc-website/gate/gate.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/gate/gate.png') }}"
    primary_button:
      label: "Start Admission Process!"
      url: "https://mdcwap.mdc.edu/adulteducationadmission/NewUser.aspx"

Component Versions

V1 External Url

Hero with external URL in primary button for external navigation

- id: "hero_one_image"
  data:
    heading: "<strong class='bold-700'>Find your voice,</strong> <br/> Amplify Your Message!"
    sub_heading: "Unleash your teen's creative and communicative potential! This two-week summer camp blends essential public speaking techniques with the exciting world of podcast production."
    right_image:
      url: "https://storage.googleapis.com/mdc-website/summercamps-courses/hero-speak-up.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-courses/hero-speak-up.png') }}"
    primary_button:
      label: "Start Admission Process!"
      url: "https://mdcwap.mdc.edu/adulteducationadmission/NewUser.aspx"

V2 Scroll To Component

Hero with scroll_to_component in primary button for internal page navigation

- id: "hero_one_image"
  data:
    heading: "<strong class='bold-700'>Boost your SAT Math score</strong> and strengthen your college applications!"
    sub_heading: "This focused preparation course provides a comprehensive review of essential math skills, along with proven strategies and techniques to excel on the SAT Math section."
    right_image:
      url: "https://storage.googleapis.com/mdc-website/summercamps/image-container-9.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps/image-container-9.png') }}"
    primary_button:
      label: "Enroll today!"
      scroll_to_component: "price_cards_section"

Hero One Image Centered Right

Hero: main content, one image centered to the right. Use when a single, impactful image needs to be showcased prominently on the right side.

Main Example

- id: "hero_one_image_centered_right"
  data:
    mini_heading: "Google Career Certificates"
    heading: "Your next career <strong class='bold-700'>powered by Google.</strong> Your success, guided by MDC."
    sub_heading: "Earn industry-recognized Google Career Certificates. 100% online, flexible, and designed for real-world jobs."
    primary_button:
      label: "Start your path here"
      scroll_to_component: "course_cards_section_basic"
    side_image:
      url: "https://storage.googleapis.com/mdc-website/google-certificates/option-two.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/google-certificates/option-two.png') }}"

Hero Two Images

Visually appealing hero section with two layered images and call-to-action

Main Example

- id: "hero_two_images"
  data:
    heading: "Speak confidently, <br/> <strong class='bold-700'>learn effectively!</strong>"
    sub_heading: "Take control of your future with MDC's English Program. From intensive English to conversation-focused courses, we'll help you reach your language goals."
    classes: "px-4 px-md-0 mb-0 mb-md-5 mt-3"
    primary_button:
      label: "Start your path here"
      scroll_to_component: "finder_simple"
    side_image_up:
      url: "https://storage.googleapis.com/mdc-website/english/down.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english/down.png') }}"
    side_image_down:
      url: "https://storage.googleapis.com/mdc-website/english/up.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english/up.png') }}"

Horizontal Card Left Image Bordered

Bordered card with left-aligned image or video thumbnail and right-aligned content. Video opens in a Bootstrap modal on click. Supports multiple call-to-action types (scroll, modal, external link). Used for showcasing programs, features, or informational content with visual emphasis.

Main Example

- id: "horizontal_card_left_image_bordered"
  data:
    heading: "Is This Path For You?"
    description:
      - text: "The Florida Senate Committee on Postsecondary Education introduced and passed Senate Bill 7032, creating the Graduation Alternative to Traditional Education (GATE). This bill creates an alternative pathway to career credentials for students 16 to 21 years of age who have discontinued enrollment in traditional high school programs."
      - text: "Students enrolled in GATE are exempt from the payment of registration, tuition, laboratory, and examination fees. Additionally, instructional materials must be made available free of charge."
    image:
      url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg') }}"

Component Versions

V1 With Scroll Button

Left-bordered card with primary button for scroll navigation to component

- id: "horizontal_card_left_image_bordered"
  data:
    heading: "Maximize your learning potential with AI and LearnPack!"
    description:
      - text: "<a href='https://4geeks.com/learnpack' target='_blank' class='txt-primary'>LearnPack</a> is our custom-designed software for self-learners. It integrates our proprietary AI tutor, ready to address any coding-related issues and equipped with automated tests for immediate feedback, allowing for an interactive learning experience anytime!"
    image:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ai-learnpack.svg"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/4geeks-cursos/ai-learnpack.svg') }}"
    primary_button:
      label: "Start learning now!"
      scroll_to_component: "price_cards_section"

V2 With Modal Button

Left-bordered card with modal button to open a form in modal dialog

- id: "horizontal_card_left_image_bordered"
  data:
    heading: "English Placement Test"
    description:
      - text: "This test is designed to accurately assess your current level of English, regardless of whether you are a beginner or an experienced and proficient English speaker."
      - text: "The test is quick, easy to complete, and you'll receive your suggested level immediately upon completion. Knowing your level ensures you'll be placed in a class that's the right fit for you, setting you up for success from day one! To begin the test, first enter your information and click the button to start."
    image:
      url: "https://storage.googleapis.com/mdc-website/english-program-stream/i-card.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/english-program-stream/i-card.png') }}"
    modal_button:
      label: "Find Your Level Now!"
      target: "placement_test_form"

V3 With Video

Left-bordered card with video thumbnail that opens playback in a modal

- id: "horizontal_card_left_image_bordered"
  data:
    heading: "Watch Our Program Overview"
    description:
      - text: "Learn more about our program through this informative video that covers all the key aspects and benefits."
      - text: "Get insights from our instructors and see what makes our program unique."
    video:
      url: "https://www.youtube.com/embed/tzqEA_lAxr4"
      image:
        url: "https://storage.googleapis.com/mdc-website/right_video_info/program_video.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/right_video_info/program_video.svg') }}"
    primary_button:
      label: "Enroll now"
      scroll_to_component: "price_cards_section"

Horizontal Card Right Text

Text-only card without image for statistical or informational content. Features responsive headings and supports HTML formatting for emphasis.

Main Example

- id: "horizontal_card_right_text"
  data:
    heading: "Becoming a Web Developer <br/> is a strategic career choice"
    heading_mobile: "Becoming a Web Developer <br/> is a strategic career choice"
    description:
      - text: "The U.S. Bureau of Labor Statistics projects a <strong>23% job growth for web developers</strong> to 2031, far outpacing the average for all occupations. <strong>Entry-level salaries are around $60,000 annually</strong>, with experienced developers earning $120,000 or more. The flexibility of remote work, combined with the opportunity to solve complex problems and create visually engaging websites, makes web development an appealing and rewarding career path."

Component Versions

Text Only

Text-focused horizontal card without image for statistical or informational content

- id: "horizontal_card_right_text"
  data:
    heading: "Becoming a Web Developer <br/> is a strategic career choice"
    heading_mobile: "Becoming a Web Developer <br/> is a strategic career choice"
    description:
      - text: "The U.S. Bureau of Labor Statistics projects a <strong>23% job growth for web developers</strong> to 2031, far outpacing the average for all occupations. <strong>Entry-level salaries are around $60,000 annually</strong>, with experienced developers earning $120,000 or more. The flexibility of remote work, combined with the opportunity to solve complex problems and create visually engaging websites, makes web development an appealing and rewarding career path."

Three Sections

Three-column layout (left content, partner logos, and a stat card). Enable via `layout: three_sections`.

- id: "horizontal_card_right_text"
  data:
    heading: "(kept for backwards compatibility)"
    heading_mobile: "(kept for backwards compatibility)"
    description:
      - text: "(kept for backwards compatibility)"
    layout: "three_sections"
    left:
      logo:
        url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
        alt: "MDC logo"
      heading: "School of Continuing Education <br/> & Professional Development"
      text: "With over 100,000 students annually..."
    partners:
      heading: "Partners"
      logos:
        - url: "https://storage.googleapis.com/mdc-website/program-areas_ceonline/ibm-thumb.png"
          alt: "IBM"
    stat_card:
      show_heart: true
      kicker: "100 K"
      title: "of new professionals yearly"
      text: "Explore our Wall of Love..."

Hover Cards Layout

Interactive card layout featuring partnership branding (MDC + 4Geeks) with hoverable benefit cards. Each card shows desktop/mobile content variants with different icons and descriptions on hover state. Card icons are decorative (empty alt, aria-hidden); only the partnership logos carry an accessible name.

Main Example

- id: "hover_cards_layout"
  data:
    heading: "Get everything you need to succeed"
    logo_mdc:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
      alt: "Miami Dade College"
    logo_4geeks:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-4geeks.svg"
      alt: "4Geeks Academy"
    primary_button:
      label: "Join now!"
      scroll_to_component: "price_cards_section"
    cards:
      - title: "Learn from experts mentors"
        title_mobile: "Learn from experts"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description:
          desktop: "The class is taught by an industry expert with years of experience in developing AI applications and using AI for workforce productivity."
          mobile: "Access cutting-edge insights on how to best leverage AI, gained from hands-on experience training our own internal custom AI."
      - title: "Lifetime access"
        title_mobile: "1:1 Mentoring on demand"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass-hover.svg"
        description:
          desktop: "Get lifetime access to the course materials and projects"
          mobile: "Our mentors will be available to assist you online or in-person throughout the duration of the course. Ask away, there's no limit to the number of sessions"
      - title: "4Geeks Community Benefits"
        title_mobile: "Tailored career supports"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check_blue.svg"
        description:
          desktop: "Join 4Geeks.com community with access to weekly workshops, hundreds of free lessons, projects and tutorials, and many other ongoing benefits."
          mobile: "Receive customized advice and guidance, tailored to your unique professional profile."

- id: "hover_cards_layout"
  data:
    heading: "Get everything you need to succeed"
    logo_mdc:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
      alt: "Miami Dade College"
    logo_4geeks:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-4geeks.svg"
      alt: "4Geeks Academy"
    primary_button:
      label: "Join now!"
      scroll_to_component: "price_cards_section"
    cards:
      - title: "Learn from experts mentors"
        title_mobile: "Learn from experts"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description:
          desktop: "The class is taught by an industry expert with years of experience in developing AI applications and using AI for workforce productivity."
          mobile: "Access cutting-edge insights on how to best leverage AI, gained from hands-on experience training our own internal custom AI."
      - title: "Lifetime access"
        title_mobile: "1:1 Mentoring on demand"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass-hover.svg"
        description:
          desktop: "Get lifetime access to the course materials and projects"
          mobile: "Our mentors will be available to assist you online or in-person throughout the duration of the course. Ask away, there's no limit to the number of sessions"
      - title: "4Geeks Community Benefits"
        title_mobile: "Tailored career supports"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check_blue.svg"
        description:
          desktop: "Join 4Geeks.com community with access to weekly workshops, hundreds of free lessons, projects and tutorials, and many other ongoing benefits."
          mobile: "Receive customized advice and guidance, tailored to your unique professional profile."

Component Versions

V1 Success With Button

Success feature cards with primary button and no description for enrollment-focused content

- id: "hover_cards_layout"
  data:
    heading: "Get everything you need to succeed"
    logo_mdc:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
      alt: "Miami Dade College"
    logo_4geeks:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-4geeks.svg"
      alt: "4Geeks Academy"
    primary_button:
      label: "Join now!"
      scroll_to_component: "price_cards_section"
    cards:
      - title: "Learn from experts mentors"
        title_mobile: "Learn from experts"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description:
          desktop: "The class is taught by an industry expert with years of experience in developing AI applications and using AI for workforce productivity."
          mobile: "Access cutting-edge insights on how to best leverage AI, gained from hands-on experience training our own internal custom AI."
      - title: "Lifetime access"
        title_mobile: "1:1 Mentoring on demand"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass-hover.svg"
        description:
          desktop: "Get lifetime access to the course materials and projects"
          mobile: "Our mentors will be available to assist you online or in-person throughout the duration of the course. Ask away, there's no limit to the number of sessions"
      - title: "4Geeks Community Benefits"
        title_mobile: "Tailored career supports"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check_blue.svg"
        description:
          desktop: "Join 4Geeks.com community with access to weekly workshops, hundreds of free lessons, projects and tutorials, and many other ongoing benefits."
          mobile: "Receive customized advice and guidance, tailored to your unique professional profile."

- id: "hover_cards_layout"
  data:
    heading: "Get everything you need to succeed"
    logo_mdc:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
      alt: "Miami Dade College"
    logo_4geeks:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-4geeks.svg"
      alt: "4Geeks Academy"
    primary_button:
      label: "Join now!"
      scroll_to_component: "price_cards_section"
    cards:
      - title: "Learn from experts mentors"
        title_mobile: "Learn from experts"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description:
          desktop: "The class is taught by an industry expert with years of experience in developing AI applications and using AI for workforce productivity."
          mobile: "Access cutting-edge insights on how to best leverage AI, gained from hands-on experience training our own internal custom AI."
      - title: "Lifetime access"
        title_mobile: "1:1 Mentoring on demand"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass-hover.svg"
        description:
          desktop: "Get lifetime access to the course materials and projects"
          mobile: "Our mentors will be available to assist you online or in-person throughout the duration of the course. Ask away, there's no limit to the number of sessions"
      - title: "4Geeks Community Benefits"
        title_mobile: "Tailored career supports"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/hover_cards_layout/check_blue.svg"
        description:
          desktop: "Join 4Geeks.com community with access to weekly workshops, hundreds of free lessons, projects and tutorials, and many other ongoing benefits."
          mobile: "Receive customized advice and guidance, tailored to your unique professional profile."

V2 Partnership With Description

Partnership cards with description text and no primary button for educational collaboration content

- id: "hover_cards_layout"
  data:
    heading: "A partnership for student success"
    logo_mdc:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
      alt: "Miami Dade College"
    logo_4geeks:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-4geeks.svg"
      alt: "4Geeks Academy"
    description: "This combined offer in partnership with 4Geeks and Miami Dade College creates a very affordable option for students while keeping 4Geeks traditional and very successful approach for teaching coding-related skills."
    cards:
      - title: "Freedom-oriented"
        title_mobile: "Freedom-oriented"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass-hover.svg"
        description:
          desktop: "Strong focus in mentorship and consistent micro-feedback to empower students for blended, flexible schedule, active and self-directed learning."
          mobile: "Strong focus in mentorship and consistent micro-feedback to empower students for blended, flexible schedule, active and self-directed learning."
      - title: "No delay in feedback and support"
        title_mobile: "No delay in feedback and support"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/cyborg.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/cyborg-hover.svg"
        description:
          desktop: "Our deep mentorship network allows students with one 1-1 mentorship session, with 12 hr/day support channels for Q&A and real-time instant feedback from our internally developed AI."
          mobile: "Our deep mentorship network allows students with one 1-1 mentorship session, with 12 hr/day support channels for Q&A and real-time instant feedback from our internally developed AI."
      - title: "Designed for career success"
        title_mobile: "Designed for career success"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description:
          desktop: "Most students, but especially underrepresented and minorities, struggle believing they can make it into tech. Building their confidence, embracing mistakes (lots of them) as a part of learning. Students work on guided experiences under the same tools and environments they will use after they get employed."
          mobile: "Most students, but especially underrepresented and minorities, struggle believing they can make it into tech. Building their confidence, embracing mistakes (lots of them) as a part of learning. Students work on guided experiences under the same tools and environments they will use after they get employed."

- id: "hover_cards_layout"
  data:
    heading: "A partnership for student success"
    logo_mdc:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-mdc.svg"
      alt: "Miami Dade College"
    logo_4geeks:
      url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/logo-4geeks.svg"
      alt: "4Geeks Academy"
    description: "This combined offer in partnership with 4Geeks and Miami Dade College creates a very affordable option for students while keeping 4Geeks traditional and very successful approach for teaching coding-related skills."
    cards:
      - title: "Freedom-oriented"
        title_mobile: "Freedom-oriented"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/compass-hover.svg"
        description:
          desktop: "Strong focus in mentorship and consistent micro-feedback to empower students for blended, flexible schedule, active and self-directed learning."
          mobile: "Strong focus in mentorship and consistent micro-feedback to empower students for blended, flexible schedule, active and self-directed learning."
      - title: "No delay in feedback and support"
        title_mobile: "No delay in feedback and support"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/cyborg.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/cyborg-hover.svg"
        description:
          desktop: "Our deep mentorship network allows students with one 1-1 mentorship session, with 12 hr/day support channels for Q&A and real-time instant feedback from our internally developed AI."
          mobile: "Our deep mentorship network allows students with one 1-1 mentorship session, with 12 hr/day support channels for Q&A and real-time instant feedback from our internally developed AI."
      - title: "Designed for career success"
        title_mobile: "Designed for career success"
        image:
          desktop:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon2.svg"
          mobile:
            url: "https://storage.googleapis.com/mdc-website/geeks-cursos/ribon-hover.svg"
        description:
          desktop: "Most students, but especially underrepresented and minorities, struggle believing they can make it into tech. Building their confidence, embracing mistakes (lots of them) as a part of learning. Students work on guided experiences under the same tools and environments they will use after they get employed."
          mobile: "Most students, but especially underrepresented and minorities, struggle believing they can make it into tech. Building their confidence, embracing mistakes (lots of them) as a part of learning. Students work on guided experiences under the same tools and environments they will use after they get employed."

Horizontal Card Right Image

Borderless card with right-aligned image and responsive layout. Supports background styling classes and responsive sub-headings. Used for prominent program highlights and career-focused content.

Main Example

- id: "horizontal_card_right_image"
  data:
    heading: "Your Pathway to Success!"
    heading_mobile: "Your Pathway <br/> to Success!"
    classes:
      - "bg-option-2"
    sub_heading:
      label: "GATE PROGRAM"
    description:
      - text: "Take charge of your future with Miami Dade College's career and technical education (CTE) programs. Earn your GED and a vocational credential simultaneously in fields like health care, business, hospitality, or technology while you benefit from experienced instructors, hands-on training, and academic and career support."
    primary_button:
      label: "More about GATE!"
      label_mobile: "Join Now!"
      url: "https://ce.mdc.edu/gate"
    image:
      url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg') }}"

Horizontal Card Centered

Horizontal card with all content centered: heading, underline, description text, optional CTA button, and optional row of partner logos. Use for hero-style or spotlight sections (e.g. scholarships, programs overview). Always set theme to "dark" (black background) when generating YAML; light is only for explicit manual overrides.

Main Example

- id: "horizontal_card_centered"
  data:
    theme: dark
    heading: "Scholarships"
    heading_mobile: "Scholarships"
    description:
      - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    primary_button:
      label: "See all Scholarships"
      url: "https://example.com/scholarships"
    partners:
      heading: "Partners"
      logos:
        - url: "https://storage.googleapis.com/mdc-website/media-gallery/52f9b4a7b5d8412fb20b46bc09242193.png"
          alt: "Partner 1"
        - url: "https://storage.googleapis.com/mdc-website/media-gallery/29c809fafd0c4b079be2e887d400ead7.png"
          alt: "Partner 2"

Horizontal Card Right Image Bordered

Bordered card with right-aligned image or video and left-aligned content. Supports mini headings, tags, and multiple button types for certificates, scholarships, and informational content.

Main Example

- id: "horizontal_card_right_image_bordered"
  data:
    heading: "Become a Telecommunications </br> Fiber Optics Technician"
    tag: "Certificate"
    description:
      - text: "The Telecommunications Fiber Optics Certificate prepares students with the technical and safety skills needed to excel in telecommunications and fiber optics careers. "
      - text: "The curriculum covers key areas such as workplace safety, aerial and underground construction, fiber optic splicing, coax splicing, and equipment operation, integrating practical, hands-on training with theoretical instruction. "
    image:
      url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png') }}"
    learn_more_button:
      label: "Learn More"
      url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"

- id: "horizontal_card_right_image_bordered"
 data:
 heading: "Become a Telecommunications Fiber Optics Technician"
 tag: "Certificate"
 description:
 - text: "The Telecommunications Fiber Optics Certificate prepares students with the technical and safety skills needed to excel in telecommunications and fiber optics careers. "
 - text: "The curriculum covers key areas such as workplace safety, aerial and underground construction, fiber optic splicing, coax splicing, and equipment operation, integrating practical, hands-on training with theoretical instruction. "
 image:
 url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png') }}"
 learn_more_button:
 label: "Learn More"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"

Component Versions

V1 With Primary Button

Right-bordered card with mini heading and primary button for scholarship or special offer

- id: "horizontal_card_right_image_bordered"
  data:
    mini_heading: "For City of Miami Residents"
    heading: "Scholarships are available!"
    description:
      - text: "Thanks to the generous support of the City of Miami, we're able to offer a limited number of scholarships that fully cover the program tuition. To qualify, you must be a City of Miami resident and complete the application form."
      - text: "Don't miss this opportunity to enhance your skills at no cost!"
    image:
      url: "https://storage.googleapis.com/mdc-website/applied-ai-v2/bot.svg"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/applied-ai-v2/bot.svg') }}"
    primary_button:
      label: "Apply for Scholarship!"
      url: "https://dynamicforms.ngwebsolutions.com/Submit/Start/628e3c52-5362-443c-8fe2-fd87d4015313?SSO=N"

V2 With Learn More Button

Right-bordered card with tag and learn more button for certificate programs

- id: "horizontal_card_right_image_bordered"
  data:
    heading: "Become a Telecommunications </br> Fiber Optics Technician"
    tag: "Certificate"
    description:
      - text: "The Telecommunications Fiber Optics Certificate prepares students with the technical and safety skills needed to excel in telecommunications and fiber optics careers. "
      - text: "The curriculum covers key areas such as workplace safety, aerial and underground construction, fiber optic splicing, coax splicing, and equipment operation, integrating practical, hands-on training with theoretical instruction. "
    image:
      url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png"
      alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png') }}"
    learn_more_button:
      label: "Learn More"
      url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"

- id: "horizontal_card_right_image_bordered"
 data:
 heading: "Become a Telecommunications Fiber Optics Technician"
 tag: "Certificate"
 description:
 - text: "The Telecommunications Fiber Optics Certificate prepares students with the technical and safety skills needed to excel in telecommunications and fiber optics careers. "
 - text: "The curriculum covers key areas such as workplace safety, aerial and underground construction, fiber optic splicing, coax splicing, and equipment operation, integrating practical, hands-on training with theoretical instruction. "
 image:
 url: "https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/construction-trades-institute-streams/rigtt_w500.png') }}"
 learn_more_button:
 label: "Learn More"
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=21303288&selectedProgramAreaId=13897149&selectedProgramStreamId=21246811"

V3 With Video

Right-bordered card with video instead of static image

- id: "horizontal_card_right_image_bordered"
  data:
    heading: "Watch Our Program Overview"
    tag: "Video"
    description:
      - text: "Learn more about our program through this informative video that covers all the key aspects and benefits."
      - text: "Get insights from our instructors and see what makes our program unique."
    video:
      url: "https://www.youtube.com/embed/tzqEA_lAxr4"
      image:
        url: "https://storage.googleapis.com/mdc-website/right_video_info/program_video.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/right_video_info/program_video.svg') }}"
    learn_more_button:
      label: "Learn More"
      url: "https://example.com"

Horizontal Card Left Text

Horizontal card with text on the left and multiple images on the right in a grid. Suited for sections like Training Partners: heading, body text, CTA button on the left; grid of images (with optional title/description per item) on the right.

Main Example

- id: "horizontal_card_left_text"
  data:
    heading: "Training Partners"
    heading_mobile: "Training Partners"
    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. We work with industry leaders to deliver world-class training."
    primary_button:
      label: "See all Training Partners"
      url: "https://example.com/partners"
    images:
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/52f9b4a7b5d8412fb20b46bc09242193.png"
        alt: "Apple"
        title: "Apple"
        description: "Lorem ipsum dolor sit amet consectetur."
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/29c809fafd0c4b079be2e887d400ead7.png"
        alt: "Partner"
        title: "TESLA"
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/5734a0a4c8354a858e4e6c78147c9bd8.png"
        alt: "Intel"
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/ad278476907a40e0b04cbba40bab3ef1.png"
        alt: "4Geeks"
        title: "4Geeks"

- id: "horizontal_card_left_text"
  data:
    heading: "Training Partners"
    heading_mobile: "Training Partners"
    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. We work with industry leaders to deliver world-class training."
    primary_button:
      label: "See all Training Partners"
      url: "https://example.com/partners"
    images:
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/52f9b4a7b5d8412fb20b46bc09242193.png"
        alt: "Apple"
        title: "Apple"
        description: "Lorem ipsum dolor sit amet consectetur."
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/29c809fafd0c4b079be2e887d400ead7.png"
        alt: "Partner"
        title: "TESLA"
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/5734a0a4c8354a858e4e6c78147c9bd8.png"
        alt: "Intel"
      - url: "https://storage.googleapis.com/mdc-website/media-gallery/ad278476907a40e0b04cbba40bab3ef1.png"
        alt: "4Geeks"
        title: "4Geeks"

Campus Location Map

Interactive map showing multiple campus locations with desktop and mobile views. Used for adult education, English programs, GED, IET, and summer camps.

Main Example

- id: "campus_location_map"
  data:
    heading: "Visit our Campus Location"
    heading_mobile: "Learn Online or <br/> at Any of our Campuses"
    locations_to_show:
      - name: "hialeah"
        email: "AE_Hialeah@mdc.edu"
      - name: "homestead"
        email: "AE_Homestead@mdc.edu"
      - name: "north"
        email: "AE_North@mdc.edu"
      - name: "kendall"
        email: "AE_Kendall@mdc.edu"
      - name: "padron"
        email: "AE_Padron@mdc.edu"
      - name: "wolfson"
        email: "AE_Wolfson@mdc.edu"
    meta_info:
      destiny_type: "content_piece"
      slug: "adult-education"

Campus Location Map Two Images

Campus location map with enhanced visual presentation including two images per location. Used for summer camps program streams to showcase specific campus locations.

Main Example

- id: "campus_location_map_two_images"
  data:
    heading: "How to get to the <br/> Kendall Campus"
    heading_mobile: "How to get to the <br/> Kendall Campus"
    locations_to_show:
      - name: "kendall"
        email: "AE_Kendall@mdc.edu"
    meta_info:
      destiny_type: "program_stream"
      slug: "kendall-camps"

Component Versions

Visual Enhanced

Campus location map with dual visual elements for summer camps or specialized programs

- id: "campus_location_map_two_images"
  data:
    heading: "How to get to the <br/> West Campus"
    heading_mobile: "How to get to the <br/> West Campus"
    locations_to_show:
      - name: "west"
        email: null
    meta_info:
      destiny_type: "program_stream"
      slug: "kendall-camps"

Course List With Cta

Split layout: selectable course list on the left and a prices-course-card CTA on the right. Selecting a list item updates the CTA panel. Each course shows badges for Ages (Kids & Teens only), Duration, Modality, and Next Cohort; the CTA card shows the course description instead of a price. On mobile (<992px) the selector list is hidden and all courses render stacked as large cards.

Main Example

- id: "course_list_with_cta"
  data:
    heading: "Our Courses"
    sub_heading: "Select a course to see details"
    default_selected_index: 0
    courses:
      - title: "Introduction to Health Care Careers Camp"
        age_range: "13-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png') }}"
        scholarship_available: false
        duration: "20 hours"
        modality: "In-Person"
        date_type: "range"
        date_info: "07/21 - 07/25"
        description: "Explore health care careers hands-on with labs, simulations, and visits led by MDC Medical Campus faculty."
        more_info_link:
          slug: "intro-heathcare-west"
      - title: "SAT Bootcamp"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png') }}"
        scholarship_available: false
        duration: "30 hours"
        modality: "Blended"
        date_type: "range"
        date_info: "07/07 - 07/11"
        description: "Intensive SAT prep covering math, reading, and writing with practice exams and personalized score strategies."
        more_info_link:
          slug: "sat-bootcamp"

- id: "course_list_with_cta"
  data:
    heading: "Our Courses"
    sub_heading: "Select a course to see details"
    default_selected_index: 0
    courses:
      - title: "Introduction to Health Care Careers Camp"
        age_range: "13-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png') }}"
        scholarship_available: false
        duration: "20 hours"
        modality: "In-Person"
        date_type: "range"
        date_info: "07/21 - 07/25"
        description: "Explore health care careers hands-on with labs, simulations, and visits led by MDC Medical Campus faculty."
        more_info_link:
          slug: "intro-heathcare-west"
      - title: "SAT Bootcamp"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png') }}"
        scholarship_available: false
        duration: "30 hours"
        modality: "Blended"
        date_type: "range"
        date_info: "07/07 - 07/11"
        description: "Intensive SAT prep covering math, reading, and writing with practice exams and personalized score strategies."
        more_info_link:
          slug: "sat-bootcamp"

Price Cards Section

Dynamic pricing section with automatic database population for course enrollment. Content is populated dynamically from Destiny database based on course dates.

Main Example

- id: "price_cards_section"
  data:
    heading: "Enroll in <br /> Web Development"
    sub_heading: "Choose one of the following upcoming dates from the list below"

Course Cards Section Basic

Flexible course cards section supporting multiple enrollment types (modals, direct URLs, internal slugs) with customizable button labels and optional certificate badges.

Main Example

- id: "course_cards_section_basic"
  data:
    heading: "Explore Our Programs"
    sub_heading: "Our programs are designed to prepare you for the jobs </br> of the future — accessible, flexible, and effective."
    courses:
      - title: "Google Artificial Intelligence"
        image:
          url: "https://storage.googleapis.com/mdc-website/google-certificates/ai.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/google-certificates/ai.png') }}"
        description: "Transform your career by mastering AI fundamentals from ML basics to building and deploying neural networks with TensorFlow. Designed by Google experts, the program uses hands-on labs and real-world projects to build practical, job-ready problem-solving skills."
        delivery: "On-line"
        enroll_link:
          modal_target: "scholarships_form"
          label: "Apply for Scholarship"
  
      - title: "Airframe Certification"
        image:
          url: "https://storage.googleapis.com/mdc-website/aviation-streams/airframe.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/aviation-streams/airframe.png') }}"
        description: "This certification covers all aircraft parts except engines, propellers, and related instruments. This includes inspecting, servicing, repairing, and troubleshooting the entire aircraft structure."
        certificate-badges:
          - "General"
          - "Airframe"
        enroll_link:
          url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=28666218"
          label: "Enroll in Airframe"
  
      - title: "Google Data Analytics"
        image:
          url: "https://storage.googleapis.com/mdc-website/google-certificates/data.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/google-certificates/data.png') }}"
        description: "Learn core data tools—spreadsheets, SQL, Tableau, and R—and when to use them across the data lifecycle. Translate business questions into analyses and distill results into clear, actionable insights."
        delivery: "On-line"
        enroll_link:
          slug: "google-data-analytics"
          label: ""  # Empty label falls back to default 'Enroll now'

- id: "course_cards_section_basic"
 data:
 heading: "Explore Our Programs"
 sub_heading: "Our programs are designed to prepare you for the jobs of the future — accessible, flexible, and effective."
 courses:
 - title: "Google Artificial Intelligence"
 image:
 url: "https://storage.googleapis.com/mdc-website/google-certificates/ai.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/google-certificates/ai.png') }}"
 description: "Transform your career by mastering AI fundamentals from ML basics to building and deploying neural networks with TensorFlow. Designed by Google experts, the program uses hands-on labs and real-world projects to build practical, job-ready problem-solving skills."
 delivery: "On-line"
 enroll_link:
 modal_target: "scholarships_form"
 label: "Apply for Scholarship"
 
 - title: "Airframe Certification"
 image:
 url: "https://storage.googleapis.com/mdc-website/aviation-streams/airframe.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/aviation-streams/airframe.png') }}"
 description: "This certification covers all aircraft parts except engines, propellers, and related instruments. This includes inspecting, servicing, repairing, and troubleshooting the entire aircraft structure."
 certificate-badges:
 - "General"
 - "Airframe"
 enroll_link:
 url: "https://ce.mdc.edu/public/category/courseCategoryCertificateProfile.do?method=load&certificateId=28666218"
 label: "Enroll in Airframe"
 
 - title: "Google Data Analytics"
 image:
 url: "https://storage.googleapis.com/mdc-website/google-certificates/data.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/google-certificates/data.png') }}"
 description: "Learn core data tools—spreadsheets, SQL, Tableau, and R—and when to use them across the data lifecycle. Translate business questions into analyses and distill results into clear, actionable insights."
 delivery: "On-line"
 enroll_link:
 slug: "google-data-analytics"
 label: "" # Empty label falls back to default 'Enroll now'

Primary Course With Related

Shows a primary highlighted course and related courses in card format, each with schedule, description, and enroll action.

Main Example

- id: "primary_course_with_related"
  data:
    heading: "Explore Our Judo Program"
    sub_heading: "Our program offers solid training based on the fundamental principles of judo, designed specifically for each age group."
    courses:
      - card_size: "full"
        title: "Intensive Judo"
        delivery: "All Ages"
        image:
          url: "https://storage.googleapis.com/mdc-website/judo-courses_intensive-judo/intensive-judo-about.png"
          alt: "Intensive Judo"
        schedule:
          days: ["Monday through Thursday"]
          time: ["All Ages"]
        description: "Open to all ages and designed for those committed to dedicated training and competition. Whether you are preparing for your first match or aiming to advance your competitive rank, this program offers structure, challenge, and coaching support."
        enroll_link:
          url: "https://ce.mdc.edu/search/publicCourseSearchDetails.do?method=load&courseId=31429163"
      - card_size: "quarter"
        title: "Judo - Ages 5 to 7"
        delivery: "Ages 5 to 7"
        image:
          url: "https://storage.googleapis.com/mdc-website/media-gallery/5dc788ddde8543f5bd650d13fb3d0a60.png"
          alt: "Judo Ages 5 to 7"
        schedule:
          days: ["Mondays to Thursdays"]
          time: ["5:00 - 6:00 PM"]
        description: "Through age-appropriate games and exercises, children learn the fundamentals of judo while practicing teamwork, discipline, respect, honesty, and self-control."
        enroll_link:
          url: "https://ce.mdc.edu/search/publicCourseSearchDetails.do?method=load&courseId=30921811"
      - card_size: "quarter"
        title: "Judo - Ages 8 to 11"
        delivery: "Ages 8 to 11"
        image:
          url: "https://storage.googleapis.com/mdc-website/media-gallery/2a30b8752c98470db0f781d6e334c2dd.png"
          alt: "Judo Ages 8 to 11"
        schedule:
          days: ["Mondays to Thursdays"]
          time: ["5:00 - 6:00 PM"]
        description: "Dynamic classes designed to help children develop coordination, balance, strength, and confidence while growing healthy and responsible."
        enroll_link:
          url: "https://ce.mdc.edu/search/publicCourseSearchDetails.do?method=load&courseId=30921927"

- id: "primary_course_with_related"
  data:
    heading: "Explore Our Judo Program"
    sub_heading: "Our program offers solid training based on the fundamental principles of judo, designed specifically for each age group."
    courses:
      - card_size: "full"
        title: "Intensive Judo"
        delivery: "All Ages"
        image:
          url: "https://storage.googleapis.com/mdc-website/judo-courses_intensive-judo/intensive-judo-about.png"
          alt: "Intensive Judo"
        schedule:
          days: ["Monday through Thursday"]
          time: ["All Ages"]
        description: "Open to all ages and designed for those committed to dedicated training and competition. Whether you are preparing for your first match or aiming to advance your competitive rank, this program offers structure, challenge, and coaching support."
        enroll_link:
          url: "https://ce.mdc.edu/search/publicCourseSearchDetails.do?method=load&courseId=31429163"
      - card_size: "quarter"
        title: "Judo - Ages 5 to 7"
        delivery: "Ages 5 to 7"
        image:
          url: "https://storage.googleapis.com/mdc-website/media-gallery/5dc788ddde8543f5bd650d13fb3d0a60.png"
          alt: "Judo Ages 5 to 7"
        schedule:
          days: ["Mondays to Thursdays"]
          time: ["5:00 - 6:00 PM"]
        description: "Through age-appropriate games and exercises, children learn the fundamentals of judo while practicing teamwork, discipline, respect, honesty, and self-control."
        enroll_link:
          url: "https://ce.mdc.edu/search/publicCourseSearchDetails.do?method=load&courseId=30921811"
      - card_size: "quarter"
        title: "Judo - Ages 8 to 11"
        delivery: "Ages 8 to 11"
        image:
          url: "https://storage.googleapis.com/mdc-website/media-gallery/2a30b8752c98470db0f781d6e334c2dd.png"
          alt: "Judo Ages 8 to 11"
        schedule:
          days: ["Mondays to Thursdays"]
          time: ["5:00 - 6:00 PM"]
        description: "Dynamic classes designed to help children develop coordination, balance, strength, and confidence while growing healthy and responsible."
        enroll_link:
          url: "https://ce.mdc.edu/search/publicCourseSearchDetails.do?method=load&courseId=30921927"

Course Cards Section

Course cards section for summer camp programs with age ranges, pricing, and enrollment links.

Main Example

- id: "course_cards_section"
  data:
    heading: "Our Courses"
    sub_heading: "Explore and discover the courses we offer this summer"
    courses:
      - title: "Introduction to Health Care Careers Camp"
        age_range: "13-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png') }}"
        scholarship_available: false
        date_type: "range"
        date_info: "07/21 - 07/25"
        price: "259"
        more_info_link:
          slug: "intro-heathcare-west"
      - title: "SAT Bootcamp"
        age_range: "14-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png') }}"
        scholarship_available: false
        date_type: "range"
        date_info: "07/07 - 07/11"
        price: "250"
        more_info_link:
          slug: "sat-bootcamp"
      - title: "The Apple Swift Experience: Summer Coding Fun"
        age_range: "14-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/android-k.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/android-k.png') }}"
        scholarship_available: true
        date_type: "multiple"
        price: "hidden"
        more_info_link:
          slug: "apple-swift-experience-west"
      - title: "Electric Vehicles"
        age_range: "13-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/electric-vehicles.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/electric-vehicles.png') }}"
        scholarship_available: true
        date_type: "range"
        date_info: "6/23 - 6/27"
        price: "hidden"
        more_info_link:
          slug: "electric-vehicles-west"

- id: "course_cards_section"
  data:
    heading: "Our Courses"
    sub_heading: "Explore and discover the courses we offer this summer"
    courses:
      - title: "Introduction to Health Care Careers Camp"
        age_range: "13-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/medical-course.png') }}"
        scholarship_available: false
        date_type: "range"
        date_info: "07/21 - 07/25"
        price: "259"
        more_info_link:
          slug: "intro-heathcare-west"
      - title: "SAT Bootcamp"
        age_range: "14-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/sat-bootcamp.png') }}"
        scholarship_available: false
        date_type: "range"
        date_info: "07/07 - 07/11"
        price: "250"
        more_info_link:
          slug: "sat-bootcamp"
      - title: "The Apple Swift Experience: Summer Coding Fun"
        age_range: "14-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/android-k.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/android-k.png') }}"
        scholarship_available: true
        date_type: "multiple"
        price: "hidden"
        more_info_link:
          slug: "apple-swift-experience-west"
      - title: "Electric Vehicles"
        age_range: "13-17"
        image:
          url: "https://storage.googleapis.com/mdc-website/summercamps-streams/electric-vehicles.png"
          alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps-streams/electric-vehicles.png') }}"
        scholarship_available: true
        date_type: "range"
        date_info: "6/23 - 6/27"
        price: "hidden"
        more_info_link:
          slug: "electric-vehicles-west"

Certificate Enrollment Section

Complex enrollment section for aviation certificate programs with pricing, course lists, and requirements. Features scholarship information, course grouping, and accordion-based additional information.

Main Example

- id: "certificate_enrollment_section"
  data:
    header:
      certificate_badge:
        text: 'Certificate'
      title: 'Enroll for this Certificate'
  
    left_card:
      scholarship:
        available: true
        text: 'Scholarships Available'
      location: 'Blended'
      price: '9,884.00'
      certificate_name: 'Airframe and Powerplant Technician'
      courses_count: 16
      duration: '936 hrs'
  
    right_section:
      enroll_button:
        enabled: true
        label: 'Enroll in this Certificate'
      apply_button:
        text: 'Apply for Scholarship'
        modal_target: 'scholarships_form'
      courses_accordion:
        title: 'Airframe and Powerplant Certification'
        subtitle: '16 courses required to complete this certification'
        mobile_subtitle: 'Minimum Required 16 Courses'
        course_groups:
          - title: 'General'
            courses:
              - name: '1453 AMT1000 Aviation Maintenance Technician (AMT) Introduction'
                link:
                  slug: 'amt1000-aviation-maintenance-technician-introduction'
              - name: '1454 AMT1010 Aircraft Preventative Maintenance'
                link:
                  slug: 'amt1010-aircraft-preventative-maintenance'
              - name: '1455 AMT1011 Aviation Regulatory Compliance & Inspections'
                link:
                  slug: 'amt1011-aviation-regulatory-compliance-inspections'
              - name: '1456 AMT1012 Electrical Systems I Introduction'
                link:
                  slug: 'amt1012-electrical-systems-i-introduction'
          - title: 'Airframe'
            courses:
              - name: '1459 AMT1100 Aircraft Structural Repair'
                link:
                  slug: 'amt1100-aircraft-structural-repair'
              - name: '1460 AMT1110 Advanced Aircraft Systems'
                link:
                  slug: 'amt1110-advanced-aircraft-systems'
              - name: '1461 AMT1111 Advanced Aircraft Systems II'
                link:
                  slug: 'amt1111-advanced-aircraft-systems-2'
              - name: '1462 AMT1112 Electrical Systems II'
                link:
                  slug: 'amt1112-electrical-systems-2'
              - name: '1463 AMT1113 Advanced Aircraft Systems III'
                link:
                  slug: 'amt1113-advanced-aircraft-systems-3'
              - name: '1464 AMT1114 Advanced Aircraft Systems IV'
                link:
                  slug: 'amt1114-advanced-aircraft-systems-4'
          - title: 'Powerplant'
            courses:
              - name: '1465 AMT1200 Introduction to Aircraft Reciprocating Engines'
                link:
                  slug: 'amt1200-introduction-aircraft-reciprocating-engines'
              - name: '1466 AMT1210 Aircraft Reciprocating Engines II'
                link:
                  slug: 'amt1210-aircraft-reciprocating-engines-2'
              - name: '1467 AMT1211 Aircraft Reciprocating Engines III'
                link:
                  slug: 'amt1211-aircraft-reciprocating-engines-3'
              - name: '1468 AMT1212 Introduction to Aircraft Turbine Engines'
                link:
                  slug: 'amt1212-introduction-aircraft-turbine-engines'
              - name: '1469 AMT1213 Aircraft Turbine Engines II'
                link:
                  slug: 'amt1213-aircraft-turbine-engines-2'
              - name: '1470 AMT1214 Aircraft Turbine Engines III'
                link:
                  slug: 'amt1214-aircraft-turbine-engines-3'
      additional_accordions:
        - id: 'courseRequirements'
          title: 'Course requirements'
          description: 'To enroll in this certification program, you must meet the following requirements:'
          list_items:
            - 'Be at least 18 years of age'
            - 'Have a high school diploma or GED equivalent'
            - 'Be able to read, write, speak, and understand English'
            - 'Pass a background check'
        - id: 'scholarship'
          title: 'Scholarship available'
          description: 'We offer various scholarship opportunities for qualified students. To apply for a scholarship, click the button below to complete the application form.'
          button:
            label: 'Apply for Scholarship'
            modal_target: 'scholarships_form'

- id: "certificate_enrollment_section"
  data:
    header:
      certificate_badge:
        text: 'Certificate'
      title: 'Enroll for this Certificate'
  
    left_card:
      scholarship:
        available: true
        text: 'Scholarships Available'
      location: 'Blended'
      price: '9,884.00'
      certificate_name: 'Airframe and Powerplant Technician'
      courses_count: 16
      duration: '936 hrs'
  
    right_section:
      enroll_button:
        enabled: true
        label: 'Enroll in this Certificate'
      apply_button:
        text: 'Apply for Scholarship'
        modal_target: 'scholarships_form'
      courses_accordion:
        title: 'Airframe and Powerplant Certification'
        subtitle: '16 courses required to complete this certification'
        mobile_subtitle: 'Minimum Required 16 Courses'
        course_groups:
          - title: 'General'
            courses:
              - name: '1453 AMT1000 Aviation Maintenance Technician (AMT) Introduction'
                link:
                  slug: 'amt1000-aviation-maintenance-technician-introduction'
              - name: '1454 AMT1010 Aircraft Preventative Maintenance'
                link:
                  slug: 'amt1010-aircraft-preventative-maintenance'
              - name: '1455 AMT1011 Aviation Regulatory Compliance & Inspections'
                link:
                  slug: 'amt1011-aviation-regulatory-compliance-inspections'
              - name: '1456 AMT1012 Electrical Systems I Introduction'
                link:
                  slug: 'amt1012-electrical-systems-i-introduction'
          - title: 'Airframe'
            courses:
              - name: '1459 AMT1100 Aircraft Structural Repair'
                link:
                  slug: 'amt1100-aircraft-structural-repair'
              - name: '1460 AMT1110 Advanced Aircraft Systems'
                link:
                  slug: 'amt1110-advanced-aircraft-systems'
              - name: '1461 AMT1111 Advanced Aircraft Systems II'
                link:
                  slug: 'amt1111-advanced-aircraft-systems-2'
              - name: '1462 AMT1112 Electrical Systems II'
                link:
                  slug: 'amt1112-electrical-systems-2'
              - name: '1463 AMT1113 Advanced Aircraft Systems III'
                link:
                  slug: 'amt1113-advanced-aircraft-systems-3'
              - name: '1464 AMT1114 Advanced Aircraft Systems IV'
                link:
                  slug: 'amt1114-advanced-aircraft-systems-4'
          - title: 'Powerplant'
            courses:
              - name: '1465 AMT1200 Introduction to Aircraft Reciprocating Engines'
                link:
                  slug: 'amt1200-introduction-aircraft-reciprocating-engines'
              - name: '1466 AMT1210 Aircraft Reciprocating Engines II'
                link:
                  slug: 'amt1210-aircraft-reciprocating-engines-2'
              - name: '1467 AMT1211 Aircraft Reciprocating Engines III'
                link:
                  slug: 'amt1211-aircraft-reciprocating-engines-3'
              - name: '1468 AMT1212 Introduction to Aircraft Turbine Engines'
                link:
                  slug: 'amt1212-introduction-aircraft-turbine-engines'
              - name: '1469 AMT1213 Aircraft Turbine Engines II'
                link:
                  slug: 'amt1213-aircraft-turbine-engines-2'
              - name: '1470 AMT1214 Aircraft Turbine Engines III'
                link:
                  slug: 'amt1214-aircraft-turbine-engines-3'
      additional_accordions:
        - id: 'courseRequirements'
          title: 'Course requirements'
          description: 'To enroll in this certification program, you must meet the following requirements:'
          list_items:
            - 'Be at least 18 years of age'
            - 'Have a high school diploma or GED equivalent'
            - 'Be able to read, write, speak, and understand English'
            - 'Pass a background check'
        - id: 'scholarship'
          title: 'Scholarship available'
          description: 'We offer various scholarship opportunities for qualified students. To apply for a scholarship, click the button below to complete the application form.'
          button:
            label: 'Apply for Scholarship'
            modal_target: 'scholarships_form'

Course Cards Section Small

Flexible course cards section supporting multiple enrollment types (modals, direct URLs, internal slugs) with customizable button labels and optional certificate badges.

Main Example

- id: "course_cards_section_small"
  data:
    tab_label: "Certificates"
    tab_icon: "https://storage.googleapis.com/mdc-website/aviation-courses/hand-certificate.svg"
    heading: "Ready to take your career further?"
    sub_heading: "Explore our full range of certificate programs<br>and build a complete path to success."
    courses:
      - title: "Electrical Technician o iOS Developer with Swift"
        image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
        description: "..."
        enroll_link: { slug: "mi-slug", label: "Enroll now" }
      - title: "Electrical Technician o iOS Developer with Swift"
        image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
        description: "..."
        enroll_link: { slug: "mi-slug", label: "Enroll now" }
      - title: "Electrical Technician o iOS Developer with Swift"
        image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
        description: "..."
        enroll_link: { slug: "mi-slug", label: "Enroll now" }
      - title: "Electrical Technician o iOS Developer with Swift"
        image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
        description: "..."
        enroll_link: { slug: "mi-slug", label: "Enroll now" }

- id: "course_cards_section_small"
 data:
 tab_label: "Certificates"
 tab_icon: "https://storage.googleapis.com/mdc-website/aviation-courses/hand-certificate.svg"
 heading: "Ready to take your career further?"
 sub_heading: "Explore our full range of certificate programs and build a complete path to success."
 courses:
 - title: "Electrical Technician o iOS Developer with Swift"
 image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
 description: "..."
 enroll_link: { slug: "mi-slug", label: "Enroll now" }
 - title: "Electrical Technician o iOS Developer with Swift"
 image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
 description: "..."
 enroll_link: { slug: "mi-slug", label: "Enroll now" }
 - title: "Electrical Technician o iOS Developer with Swift"
 image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
 description: "..."
 enroll_link: { slug: "mi-slug", label: "Enroll now" }
 - title: "Electrical Technician o iOS Developer with Swift"
 image: { url: "https://storage.googleapis.com/mdc-website/mdc-adult-education/career-adult-education.svg", alt: "..." }
 description: "..."
 enroll_link: { slug: "mi-slug", label: "Enroll now" }

Course Cards Section Certificates

Certificate-oriented cards section that displays multiple course/certificate cards with title, schedule, optional description, and enroll action.

Main Example

- id: "course_cards_section_certificates"
  data:
    heading: "Next cohort starts on"
    sub_heading: "Find the next available course dates at our locations"
    courses:
      - title: "Kendall Campus"
        image:
          url: "https://storage.googleapis.com/mdc-website/ios-developer/campus-thumb-kendall.png"
          alt: "Kendall Campus"
        description:
          - "<span class='bold-600'> Course name:</span> iPhone Application Development 1"
          - "<span class='bold-600'> Start:</span> August 18, 2026"
          - "<span class='bold-600'> Schedule:</span> Mon / Wed"
          - "<span class='bold-600'> Class time:</span> 6:00 PM - 9:00 PM"
        enroll_link:
          url: "https://mdc-ce.formstack.com/forms/apple_ios_dev"
          label: "Apply to this location"
      - title: "North Campus"
        image:
          url: "https://storage.googleapis.com/mdc-website/ios-developer/campus-thumb-north.png"
          alt: "North Campus"
        description:
          - "<span class='bold-600'> Course name:</span> iPhone Application Development 1"
          - "<span class='bold-600'> Start:</span> September 8, 2026"
          - "<span class='bold-600'> Schedule:</span> Tue / Thu"
          - "<span class='bold-600'> Class time:</span> 6:00 PM - 9:00 PM"
        enroll_link:
          url: "https://mdc-ce.formstack.com/forms/apple_ios_dev"
          label: "Apply to this location"

- id: "course_cards_section_certificates"
 data:
 heading: "Next cohort starts on"
 sub_heading: "Find the next available course dates at our locations"
 courses:
 - title: "Kendall Campus"
 image:
 url: "https://storage.googleapis.com/mdc-website/ios-developer/campus-thumb-kendall.png"
 alt: "Kendall Campus"
 description:
 - " Course name: iPhone Application Development 1"
 - " Start: August 18, 2026"
 - " Schedule: Mon / Wed"
 - " Class time: 6:00 PM - 9:00 PM"
 enroll_link:
 url: "https://mdc-ce.formstack.com/forms/apple_ios_dev"
 label: "Apply to this location"
 - title: "North Campus"
 image:
 url: "https://storage.googleapis.com/mdc-website/ios-developer/campus-thumb-north.png"
 alt: "North Campus"
 description:
 - " Course name: iPhone Application Development 1"
 - " Start: September 8, 2026"
 - " Schedule: Tue / Thu"
 - " Class time: 6:00 PM - 9:00 PM"
 enroll_link:
 url: "https://mdc-ce.formstack.com/forms/apple_ios_dev"
 label: "Apply to this location"

Right Video

Displays a section with descriptive content on the left side and a video on the right side. Used for GED and GATE programs. course_description list icons are decorative (empty alt, aria-hidden); the video thumbnail keeps a meaningful alt.

Main Example

- id: "right_video"
  data:
    heading: "The path starts with GED"
    description:
      - "Obtaining your GED opens the door to higher education, better job opportunities, and higher earning potential. It serves as a recognized equivalent to a high school diploma, providing you with the credentials needed to pursue college degrees, vocational training, and career advancement."
      - "Your journey to success starts here!"
    button_transparent:
      label: "Online Admission Form"
      url: "https://mdcwap.mdc.edu/adulteducationadmission/NewUser.aspx"
    video:
      image:
        url: "https://storage.googleapis.com/mdc-website/right_video_info/program_video.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/right_video_info/program_video.svg') }}"
      url: "https://www.youtube.com/embed/tzqEA_lAxr4"

Left Video Bicolor

Displays a section with a video on the left side and descriptive content on the right side with two-colored background. Most popular video component. course_description list icons are decorative (empty alt, aria-hidden); the video thumbnail keeps a meaningful alt.

Main Example

- id: "left_video_bicolor"
  data:
    classes:
      - "py-5"
    video:
      image:
        url: "https://storage.googleapis.com/mdc-website/summercamps/paradise-2.png"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps/paradise-2.png') }}"
    content:
      heading: "About <strong>Programmers Paradise</strong> camp"
      description:
        - "Have you ever wanted to create your own video game or mobile app?"
        - "In our summer bootcamp, you'll learn the basics of coding and how to create simple software projects. You'll learn to write code in the Python programming language and create fun projects."
        - "Coding is the language that computers understand, and with our bootcamp, you'll learn how to speak that language too. Whether you're a future tech innovator or just curious about how software works, our programming bootcamp is the perfect place to start your coding journey."
      course_description:
        list_options:
          - text: "<span class='bold-600'>Dates: </span> <span class='bold-300'>June 23 to 27, 2025</span>"
            icon:
              url: "https://storage.googleapis.com/mdc-website/applied-ai-v2/bank.svg"
          - text: "<span class='bold-600'>Classes: </span> <span class='bold-300'>9:00 A.M. to 12:30 P.M.</span>"
            icon:
              url: "https://storage.googleapis.com/mdc-website/applied-ai-v2/alarm.svg"
          - text: "<span class='bold-600'>Age: </span> <span class='bold-300'>13 to 17 years old</span>"

- id: "left_video_bicolor"
 data:
 classes:
 - "py-5"
 video:
 image:
 url: "https://storage.googleapis.com/mdc-website/summercamps/paradise-2.png"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps/paradise-2.png') }}"
 content:
 heading: "About Programmers Paradise camp"
 description:
 - "Have you ever wanted to create your own video game or mobile app?"
 - "In our summer bootcamp, you'll learn the basics of coding and how to create simple software projects. You'll learn to write code in the Python programming language and create fun projects."
 - "Coding is the language that computers understand, and with our bootcamp, you'll learn how to speak that language too. Whether you're a future tech innovator or just curious about how software works, our programming bootcamp is the perfect place to start your coding journey."
 course_description:
 list_options:
 - text: "Dates: June 23 to 27, 2025"
 icon:
 url: "https://storage.googleapis.com/mdc-website/applied-ai-v2/bank.svg"
 - text: "Classes: 9:00 A.M. to 12:30 P.M."
 icon:
 url: "https://storage.googleapis.com/mdc-website/applied-ai-v2/alarm.svg"
 - text: "Age: 13 to 17 years old"

Left Video Yellow Gradient

Displays a video player with descriptive content, featuring a yellow gradient background. Used exclusively for summer camps. course_description list icons are decorative (empty alt, aria-hidden); the video thumbnail keeps a meaningful alt.

Main Example

- id: "left_video_yellow_gradient"
  data:
    heading: "Learn, Explore and Enjoy!"
    video:
      url: "https://www.youtube.com/embed/XFUGFQO2E5E"
      image:
        url: "https://storage.googleapis.com/mdc-website/summercamps/summervideo.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps/summervideo.svg') }}"
    description:
      - "Get ready for the ultimate summer adventure! With an incredible range of activities and programs for all age groups, these camps are the perfect place to explore new interests."
      - "Your little ones can whip up all day activities from tasty treats in cooking class, program their own video games in coding camp, take center stage in acting workshops, and so much more!"
      - "Join us at Miami Dade College and let us provide your child with a fun, educational and secure environment filled with memories that will last a lifetime."

Left Video

Displays a section with a video on the left side and descriptive content on the right side. Used in ESOL and IET programs. course_description list icons are decorative (empty alt, aria-hidden); the video thumbnail keeps a meaningful alt.

Main Example

- id: "left_video"
  data:
    heading: "About the program"
    video:
      url: "https://www.youtube.com/embed/c0YFTGifjgg"
      image:
        url: "https://storage.googleapis.com/mdc-website/mdc-courses/web-dev.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-courses/web-dev.svg') }}"
    description:
      - "Master the most in-demand technologies for building websites, focusing on JavaScript and front-end libraries. Learn algorithm scripting, utilize APIs to enhance apps, and gain hands-on experience by developing and presenting your own project. Equip yourself with the programming, logic, and research skills needed to succeed in the tech industry."
    course_description:
      list_options:
        classes:
          - "dashed"
        options:
          - text: "<span class='bold-500'>Program Name:</span> Full Stack Web Development"
            icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/star-w.svg"
          - text: "<span class='bold-500'>Duration:</span> 14 Weeks"
            icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/open-book-w.svg"
          - text: "<span class='bold-500'>Classes:</span> 3 classes weekly"
            icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ok-hand-w.svg"
          - text: "<span class='bold-500'>Certificate:</span>  Web Development"
            icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/star-w.svg"
          - text: "<span class='bold-500'>Language:</span> English"
            icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/open-book-w.svg"

- id: "left_video"
 data:
 heading: "About the program"
 video:
 url: "https://www.youtube.com/embed/c0YFTGifjgg"
 image:
 url: "https://storage.googleapis.com/mdc-website/mdc-courses/web-dev.svg"
 alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/mdc-courses/web-dev.svg') }}"
 description:
 - "Master the most in-demand technologies for building websites, focusing on JavaScript and front-end libraries. Learn algorithm scripting, utilize APIs to enhance apps, and gain hands-on experience by developing and presenting your own project. Equip yourself with the programming, logic, and research skills needed to succeed in the tech industry."
 course_description:
 list_options:
 classes:
 - "dashed"
 options:
 - text: "Program Name: Full Stack Web Development"
 icon:
 url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/star-w.svg"
 - text: "Duration: 14 Weeks"
 icon:
 url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/open-book-w.svg"
 - text: "Classes: 3 classes weekly"
 icon:
 url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/ok-hand-w.svg"
 - text: "Certificate: Web Development"
 icon:
 url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/star-w.svg"
 - text: "Language: English"
 icon:
 url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/open-book-w.svg"

Component Versions

V0 Simple Version

Simple video section without course information (minimal version)

- id: "left_video"
  data:
    heading: "Integrated Education and Training - IET"
    video:
      url: "https://www.youtube-nocookie.com/embed/RKRJZcLnQls"
      image:
        url: "https://storage.googleapis.com/mdc-website/iet/left_video_iet.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/iet/left_video_iet.svg') }}"
    description:
      - "Integrated Education and Training or IET, is an innovative approach to help students acquire the essential skills they need to succeed in the job market. Through IET, students can pursue specific training for specific sectors of the job market while simultaneously enrolling in programs such as English for Speakers of Other Languages (ESOL) or GED preparation."
      - "This unique approach allows students to acquire the knowledge they need to compete for jobs in high-demand industries. IET is an effective way to meet the needs of adult learners, and an excellent investment for students seeking to improve their career prospects and earning potential."

- id: "left_video"
  data:
    heading: "Integrated Education and Training - IET"
    video:
      url: "https://www.youtube-nocookie.com/embed/RKRJZcLnQls"
      image:
        url: "https://storage.googleapis.com/mdc-website/iet/left_video_iet.svg"
        alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/iet/left_video_iet.svg') }}"
    description:
      - "Integrated Education and Training or IET, is an innovative approach to help students acquire the essential skills they need to succeed in the job market. Through IET, students can pursue specific training for specific sectors of the job market while simultaneously enrolling in programs such as English for Speakers of Other Languages (ESOL) or GED preparation."
      - "This unique approach allows students to acquire the knowledge they need to compete for jobs in high-demand industries. IET is an effective way to meet the needs of adult learners, and an excellent investment for students seeking to improve their career prospects and earning potential."

Left Video Certificate

Certificate-focused video section with heading, description list, optional course bullet list, and transparent CTA. List icons are decorative (empty alt, aria-hidden); the video thumbnail keeps a meaningful alt.

Main Example

- id: "left_video_certificate"
  data:
    heading: "About this Certificate"
    description:
      - "The iOS Developer Certificate program builds foundational knowledge in Swift, a powerful and intuitive programming language developed by Apple. The program teaches programming and design concepts needed to jump-start a career in mobile application development."
      - "Students learn how to create mobile applications for iOS using Xcode, Swift, and UI editors. They create and deploy applications for iPhones, iPads, and other Apple devices."
    course_description:
      list_options:
        classes: ["justify-content-between"]
        options:
          - icon:
              url: "https://storage.googleapis.com/mdc-website/ios-developer/dollar-icon.svg"
            text: "Scholarships available"
            span: "New"
          - icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/star-w.svg"
            text: "Total hours: 80"
    button_transparent:
      label: "Apply today"
      url: "https://mdc-ce.formstack.com/forms/apple_ios_dev"
    video:
      url: "https://www.youtube.com/embed/_5qILbRu7pQ"
      image:
        url: "https://storage.googleapis.com/mdc-website/ios-developer/ios-developer-video.png"
        alt: "iOS Developer Certificate video"

- id: "left_video_certificate"
  data:
    heading: "About this Certificate"
    description:
      - "The iOS Developer Certificate program builds foundational knowledge in Swift, a powerful and intuitive programming language developed by Apple. The program teaches programming and design concepts needed to jump-start a career in mobile application development."
      - "Students learn how to create mobile applications for iOS using Xcode, Swift, and UI editors. They create and deploy applications for iPhones, iPads, and other Apple devices."
    course_description:
      list_options:
        classes: ["justify-content-between"]
        options:
          - icon:
              url: "https://storage.googleapis.com/mdc-website/ios-developer/dollar-icon.svg"
            text: "Scholarships available"
            span: "New"
          - icon:
              url: "https://storage.googleapis.com/mdc-website/4geeks-cursos/star-w.svg"
            text: "Total hours: 80"
    button_transparent:
      label: "Apply today"
      url: "https://mdc-ce.formstack.com/forms/apple_ios_dev"
    video:
      url: "https://www.youtube.com/embed/_5qILbRu7pQ"
      image:
        url: "https://storage.googleapis.com/mdc-website/ios-developer/ios-developer-video.png"
        alt: "iOS Developer Certificate video"

Components Examples

Accordions

Carousels

Courses Finder

Features

Forms

Grids

Heros

Horizontal Cards

Maps

Prices

Videos

Welcome to Components Documentation

Accordion Arrow

Main Example

Accordion Plus Minus

Main Example

Component Versions

Simple Faq

Structured Faq

Course Content

Accordion Static

Main Example

Projects Carousel

Main Example

Simple Images Carousel

Main Example

Trending Courses Carousel

Main Example

Testimonials Carousel

Main Example

Box Carousel

Main Example

Success Carousel

Main Example

Horizontal Cards Carousel

Main Example

Testimonials Carousel Light

Main Example

Finder Simple

Main Example

Finder Dynamic

Main Example

Offer

Main Example

Marquee

Main Example

Online Admission Button

Main Example

Chips Languages

Main Example

Sticky Call Bar V2

Main Example

Sticky Call Bar

Main Example

Table Credits Section

Main Example

Breadcrumb

Main Example

Navbar Summer

Main Example

Discounts

Main Example

Certificate Pathways

Main Example

Certificate Two Images

Main Example

Soft Cta

Main Example

About Program Simple

Main Example

Scholarships Form

Main Example

Syllabus Form

Main Example

Waiting List Form

Main Example

Placement Test Form

Main Example

Contact Form