# Audience and about page

> Goals as links, one resource card per goal, free and paid side by side, steps, FAQ.

- Recipe: R6
- Page kind: conversion
- Serves: /career-services, /ForProfessionals, /honorsocietyorg-life, /university-relations, /society-leadership
- Base page: /career-services
- Components: page-head (https://brand.honorsociety.org/components/page-head/), band (https://brand.honorsociety.org/components/band/), heading (https://brand.honorsociety.org/components/heading/), eyebrow (https://brand.honorsociety.org/components/eyebrow/), anchor-nav (https://brand.honorsociety.org/components/anchor-nav/), card (https://brand.honorsociety.org/components/card/), prose (https://brand.honorsociety.org/components/prose/), link-list (https://brand.honorsociety.org/components/link-list/), plan-compare (https://brand.honorsociety.org/components/plan-compare/), steps (https://brand.honorsociety.org/components/steps/), faq (https://brand.honorsociety.org/components/faq/), button (https://brand.honorsociety.org/components/button/), link (https://brand.honorsociety.org/components/link/), cta-band (https://brand.honorsociety.org/components/cta-band/)
- HTML page: https://brand.honorsociety.org/recipes/r6-audience-page/

## Overview

**Serves:** /career-services (72), /ForProfessionals (33130), /honorsocietyorg-life (33398), /university-relations (84), /society-leadership (91). **Base page:** /career-services, copy as on prod 2026-10-14. **Page kind:** conversion. [All recipes](/recipes/)

**How to use this recipe:** it shows a proven page shape, not a fixed template. Start from the closest recipe, choose the components that fit the content, combine them as needed and leave out what does not fit. Only the component rules are fixed: grounds, one gold element per viewport, heading order, marks and the rules on each component page.

**Sections of the base page** (ground in brackets):

1. Page head [soft]: eyebrow, H1, lead, one button.
2. Goals [white]: band head, then the anchor nav as the list of goals.
3. Resources [soft]: band head, one basic card per resource (each with an id the goals link to), its routes as a link list.
4. Plan compare [white]: plan compare, free first, then a link row.
5. Steps [soft]: steps (3).
6. FAQ [white]: open list (fewer than 6 questions).
7. CTA band [navy]: closing band, fine print as its note.

**Other pages on this recipe add:** a leader profile (/society-leadership: `hs-leader hs-leader--no-photo`, because no portrait exists today; switch to the photo form when one does), a video facade (`hs-video`, /university-relations, /honorsocietyorg-life), a stat (/university-relations, the $1M+ placeholder as in R1).

**Components:** page-head, band, heading, eyebrow, anchor-nav, card (basic), prose, link-list, plan-compare, link-row, steps, qa (list), button, link, cta-band.

**Rules:**

- Each resource card names who gets it in its eyebrow (“Free membership”, “Bronze and higher”). Write the eyebrow in sentence case; CSS uppercases it.
- A card with two or more routes is a basic card with a link list, never a link card.
- One button per band; every band has `data-section`; every route has the two PostHog attributes.

## Live page

Copy everything inside the block. HTML comments mark what the template prints and what is a placeholder.

```html
<!-- PAGE HEAD: printed by the template (hs_core_page_head). H1 = node title. -->
<section class="hs-band hs-band--soft hs-page-head" data-section="hero">
  <div class="hs-container">
    <p class="hs-eyebrow">Honor Your Ambition&trade;</p>
    <h1 class="hs-heading hs-heading--h1 hs-heading--rule">Career Services: Jobs &amp; Mentorship</h1>
    <p class="hs-lead hs-page-head__lead">Explore your options. Learn from someone who has been there. Show employers what you can do. Honor Society&reg; career services bring together mentorship, career research, job-search tools, and professional learning to help you take your next step.</p>
    <div class="hs-actions hs-page-head__actions">
      <a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="hero">Join Free</a>
      <a class="hs-link" href="/user/login" data-ph-capture-attribute-cta="sign-in" data-ph-capture-attribute-cta-loc="hero">Sign in to your account</a>
    </div>
  </div>
</section>

<!-- BODY FIELD START -->

<!-- Goals band: the editors' goal list is the page's anchor nav. -->
<section class="hs-band" data-section="goals" aria-labelledby="career-goals-h">
  <div class="hs-container">
    <div class="hs-band__head">
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule" id="career-goals-h">Start with the goal that matters to you.</h2>
      <p class="hs-lead">Whether you are choosing a direction, applying for your first role, or planning a professional change, you can start with one useful action today.</p>
    </div>
    <nav class="hs-anchor-nav" aria-labelledby="career-goals-h">
      <ul class="hs-anchor-nav__list">
        <li><a class="hs-anchor-nav__link" href="#career-mentorship">Get advice from a mentor</a></li>
        <li><a class="hs-anchor-nav__link" href="#career-research">Research careers and employers</a></li>
        <li><a class="hs-anchor-nav__link" href="#career-job-search">Explore job opportunities</a></li>
        <li><a class="hs-anchor-nav__link" href="#career-application">Prepare your resume and interviews</a></li>
        <li><a class="hs-anchor-nav__link" href="#career-learning">Build your professional skills</a></li>
      </ul>
    </nav>
  </div>
</section>

<section class="hs-band hs-band--soft" id="career-resources" data-section="resources" aria-labelledby="career-resources-h">
  <div class="hs-container">
    <div class="hs-band__head">
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule" id="career-resources-h">Career resources, with a clear next step</h2>
      <p class="hs-lead">Free membership includes access to Firsthand mentorship. Optional premium membership adds career research and learning benefits, including Career Insider by Vault and Infobase Learning Cloud at Bronze and higher levels.</p>
    </div>
    <!-- Resource card: eyebrow (what and who gets it), h3, prose (text, list, "Your next step"), then the routes
         as a link list (quiet links: a stack of gold underlines breaks one gold per viewport). All 5 cards shown. -->
    <ul class="hs-card-grid">
      <li><div class="hs-card" id="career-mentorship"><p class="hs-eyebrow">Mentorship &middot; Free membership</p><h3 class="hs-card__title">Learn from people who have been there</h3><div class="hs-prose"><p>A conversation can help you see your options more clearly. Through the Firsthand Mentorship Program, connect with advisors who can share insight into their roles and industries, offer resume feedback, and help you practice for interviews.</p><ul><li>Ask what the day-to-day work in a role really looks like</li><li>Request a resume or CV critique</li><li>Prepare through a mock interview or career conversation</li></ul><p><strong>Your next step:</strong> Choose one question you want answered, then explore the Advisor Hub.</p></div><ul class="hs-link-list"><li class="hs-link-list__item"><a class="hs-link-list__link" href="/mentorship" data-ph-capture-attribute-cta="mentorship" data-ph-capture-attribute-cta-loc="resources">Explore Mentorship</a></li><li class="hs-link-list__item"><a class="hs-link-list__link" href="/benefits-coupons/firsthand-mentorship-program" data-ph-capture-attribute-cta="firsthand-program" data-ph-capture-attribute-cta-loc="resources">View program details</a></li></ul></div></li>
      <li><div class="hs-card" id="career-research"><p class="hs-eyebrow">Career research &middot; Premium membership: Bronze and higher</p><h3 class="hs-card__title">Get to know a career before you pursue it</h3><div class="hs-prose"><p>Career Insider by Vault helps you explore industries, professions, employers, and internships. Use its guidebooks and profiles to compare paths, understand what roles involve, and prepare more thoughtful applications.</p><p>The resource also includes resume and cover-letter templates, interview guidance, and job-search advice.</p><p><strong>Your next step:</strong> Research one role and one employer, then note the skills and experience you want to develop.</p></div><ul class="hs-link-list"><li class="hs-link-list__item"><a class="hs-link-list__link" href="/benefits-coupons/career-insider-premium-access-over-100-industry-guides-and-5000-company-profiles" data-ph-capture-attribute-cta="career-insider" data-ph-capture-attribute-cta-loc="resources">Explore Career Insider by Vault</a></li></ul></div></li>
      <li><div class="hs-card" id="career-job-search"><p class="hs-eyebrow">Job search &middot; Honor Society&reg; Career Center</p><h3 class="hs-card__title">Turn your research into a focused search</h3><div class="hs-prose"><p>Visit the Honor Society&reg; Career Center to explore job listings and its resume-upload tools. Use the roles that interest you to sharpen your search and see how your experience matches employers&rsquo; requirements.</p><p><strong>Your next step:</strong> Choose a target role, review relevant openings, and tailor your resume to an opportunity you want to pursue.</p></div><ul class="hs-link-list"><li class="hs-link-list__item"><a class="hs-link-list__link" href="https://jobs.honorsociety.org/" data-ph-capture-attribute-cta="job-listings" data-ph-capture-attribute-cta-loc="resources">Browse Job Listings</a></li><li class="hs-link-list__item"><a class="hs-link-list__link" href="https://jobs.honorsociety.org/c/resumes/edit/upload.cfm?site_id=22704" data-ph-capture-attribute-cta="resume-upload" data-ph-capture-attribute-cta-loc="resources">Upload Your Resume</a></li><li class="hs-link-list__item"><a class="hs-link-list__link" href="https://jobs.honorsociety.org/c/coaching/index.cfm" data-ph-capture-attribute-cta="career-center" data-ph-capture-attribute-cta-loc="resources">Visit the Career Center Resources</a></li></ul></div></li>
      <li><div class="hs-card" id="career-application"><p class="hs-eyebrow">Resumes &amp; interviews</p><h3 class="hs-card__title">Make your experience easier to understand</h3><div class="hs-prose"><p>Bring your coursework, projects, employment, leadership, or volunteer experience into focus. Start with a specific role, explain what you contributed, and prepare examples that show how you work.</p><ul><li><strong>For personal feedback:</strong> Explore resume critiques and mock interviews through Firsthand mentorship, available with free membership</li><li><strong>For self-guided preparation:</strong> Use the resume templates and interview guidance in Career Insider by Vault with Bronze or higher premium membership</li></ul><p><strong>Your next step:</strong> Prepare a resume draft and two examples of work you are proud of before seeking feedback.</p></div><ul class="hs-link-list"><li class="hs-link-list__item"><a class="hs-link-list__link" href="/mentorship" data-ph-capture-attribute-cta="mentorship" data-ph-capture-attribute-cta-loc="resources">Prepare with a Mentor</a></li><li class="hs-link-list__item"><a class="hs-link-list__link" href="/benefits-coupons/career-insider-premium-access-over-100-industry-guides-and-5000-company-profiles" data-ph-capture-attribute-cta="career-insider" data-ph-capture-attribute-cta-loc="resources">View Vault Resources</a></li></ul></div></li>
      <li><div class="hs-card" id="career-learning"><p class="hs-eyebrow">Professional learning &middot; Premium membership: Bronze and higher</p><h3 class="hs-card__title">Keep building what comes next</h3><div class="hs-prose"><p>Infobase Learning Cloud offers on-demand professional learning courses. Explore topics that fit your interests, choose a course that supports your development, and make learning part of your career plan.</p><p><strong>Your next step:</strong> Identify one skill you want to strengthen and set aside time to put what you learn into practice.</p></div><ul class="hs-link-list"><li class="hs-link-list__item"><a class="hs-link-list__link" href="/benefits-coupons/infobase-learning-cloud" data-ph-capture-attribute-cta="infobase" data-ph-capture-attribute-cta-loc="resources">Explore Infobase Learning Cloud</a></li></ul></div></li>
    </ul>
  </div>
</section>

<section class="hs-band" data-section="membership" aria-labelledby="career-membership-h">
  <div class="hs-container">
    <div class="hs-band__head">
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule" id="career-membership-h">Choose the membership that supports your goals</h2>
    </div>
    <!-- Plan compare with no price lines: the prod copy names no price here. -->
    <ul class="hs-plan-compare">
      <li class="hs-card hs-plan"><h3 class="hs-plan__name">Free membership</h3><p class="hs-plan__text">Join the Honor Society&reg; community and get started with Firsthand mentorship. You can explore career conversations, resume critiques, and mock interviews without upgrading to premium membership.</p></li>
      <li class="hs-card hs-plan"><span class="hs-card__tag">Optional upgrade</span><h3 class="hs-plan__name">Premium membership</h3><p class="hs-plan__text">Bronze and higher premium membership levels add Career Insider by Vault and Infobase Learning Cloud. Compare the available benefits and choose the level that fits your plans.</p></li>
    </ul>
    <div class="hs-band__foot">
      <ul class="hs-link-row">
        <li><a class="hs-link" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="membership">Compare Membership Benefits</a></li>
        <li><a class="hs-link" href="/memberdues" data-ph-capture-attribute-cta="dues" data-ph-capture-attribute-cta-loc="membership">Review Membership Dues</a></li>
      </ul>
    </div>
  </div>
</section>

<section class="hs-band hs-band--soft" data-section="this-week" aria-labelledby="career-week-h">
  <div class="hs-container">
    <div class="hs-band__head">
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule" id="career-week-h">Make progress this week</h2>
    </div>
    <ol class="hs-steps">
      <li class="hs-steps__item"><h3 class="hs-steps__title">Choose a direction.</h3><p class="hs-steps__text">Write down one role, industry, or professional goal you want to explore.</p></li>
      <li class="hs-steps__item"><h3 class="hs-steps__title">Use one resource.</h3><p class="hs-steps__text">Start a mentor conversation, research an employer, review an opening, or choose a learning topic.</p></li>
      <li class="hs-steps__item"><h3 class="hs-steps__title">Put it into practice.</h3><p class="hs-steps__text">Improve one resume section, rehearse one interview answer, or take the next step on an application.</p></li>
    </ol>
  </div>
</section>

<section class="hs-band" id="career-faqs" data-section="faq" aria-labelledby="career-faqs-h">
  <div class="hs-container">
    <div class="hs-band__head">
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule" id="career-faqs-h">Career services FAQs</h2>
    </div>
    <div class="hs-qa">
      <div class="hs-qa__item"><h3 class="hs-qa__question">What career services does Honor Society&reg; offer?</h3><div class="hs-qa__answer hs-prose"><p>Honor Society&reg; connects members with Firsthand mentorship, its Career Center, and optional premium resources for career research and professional learning. This page helps you find the right starting point for career exploration, job searching, resume preparation, and interviews.</p></div></div>
      <div class="hs-qa__item"><h3 class="hs-qa__question">Is Honor Society&reg; mentorship available with free membership?</h3><div class="hs-qa__answer hs-prose"><p>Yes. Firsthand mentorship is available with a free account. You can explore advisors who offer career conversations, resume critiques, and mock interviews. <a href="/benefits-coupons/firsthand-mentorship-program">View the Firsthand Mentorship Program</a> for access details.</p></div></div>
      <div class="hs-qa__item"><h3 class="hs-qa__question">Which career resources require premium membership?</h3><div class="hs-qa__answer hs-prose"><p>Career Insider by Vault and Infobase Learning Cloud are included at Bronze and higher premium membership levels. <a href="/benefits">Explore current member benefits</a> or <a href="/membership-tiers">compare membership levels</a> before choosing an upgrade.</p></div></div>
      <div class="hs-qa__item"><h3 class="hs-qa__question">Where can I look for jobs or upload my resume?</h3><div class="hs-qa__answer hs-prose"><p>Visit the <a href="https://jobs.honorsociety.org/">Honor Society&reg; Career Center</a> for job listings. Its <a href="https://jobs.honorsociety.org/c/resumes/edit/upload.cfm?site_id=22704">resume-upload page</a> is the starting point for adding a resume to the Career Center.</p></div></div>
      <div class="hs-qa__item"><h3 class="hs-qa__question">How do I access my career benefits?</h3><div class="hs-qa__answer hs-prose"><p><a href="/user/login">Sign in to your Honor Society&reg; account</a>, open the benefit you want to use, and follow its access instructions. Some resources use a separate partner platform. If you need help getting started, <a href="https://support.honorsociety.org/hc/en-us/requests/new">contact Member Services</a>.</p></div></div>
    </div>
  </div>
</section>

<section class="hs-band hs-band--navy hs-cta-band" data-section="next-step" aria-labelledby="career-next-h">
  <div class="hs-container hs-cta-band__inner">
    <h2 class="hs-heading hs-heading--h2" id="career-next-h">Honor Your Ambition&trade;. Take the next step.</h2>
    <p class="hs-lead">You bring the ambition. Start with free membership, find a resource that fits your goals, and turn your next step into action.</p>
    <div class="hs-actions hs-cta-band__actions">
      <a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="next-step">Start Free Membership</a>
      <a class="hs-link" href="/user/login" data-ph-capture-attribute-cta="sign-in" data-ph-capture-attribute-cta-loc="next-step">Member Sign In</a>
    </div>
    <p class="hs-cta-band__note">Visit each benefit page for current access requirements and partner terms. Mentorship sessions depend on advisor availability. Your account shows the resources available with your membership.</p>
  </div>
</section>

<!-- BODY FIELD END -->
```

## Notes

**Changes from the prod page (structure, not copy):**

- The hero h2 “Build your next career move.” has no place in the page head; the H1 is the node title.
- The hero had two gold buttons. “Join Free” stays as the one button; “Explore Career Resources” left the page head: the goals band right below links to every resource.
- “Already a member? Sign in to your account” became the page-head text link “Sign in to your account”.
- The gold-bordered goals callout became a white band whose list is the anchor nav.
- Eyebrows moved from upper case in the markup (“MENTORSHIP · FREE MEMBERSHIP”) to sentence case; CSS uppercases them.
- Each card’s link row (“A | B | C”) became a link list.
- The two membership cards became the plan compare, with no price lines (prod names no price here) and the “Optional upgrade” tag.
- The fine print under the CTA band became the CTA band note.

**Copy issues (kept as written):**

- “levels” for tiers (“Bronze and higher levels”, “membership levels”, “the level that fits”): the glossary says “tier”, never “level”.
- “premium membership” and “free membership” throughout: house style names the paid side Professional Track™.
- Banned nouns: “resources” (h2, cards, FAQ), “tools”, “opportunities”, “opportunity”.
- Labels in Title Case (“Join Free”, “Browse Job Listings”, “Member Sign In”): house style writes buttons and links in sentence case, and the join label is “Start Free Membership”.
- “Visit the Career Center Resources” and “View Vault Resources” do not name the thing the visitor gets.
- “Career Insider premium access over 100 industry guides and 5000 company profiles” is a figure inside a URL slug; it is not in site facts.

**Dynamic parts that need code:** none in the copy. The Career Center links go to jobs.honorsociety.org with a fixed `site_id`. Page head fields and full-width bands on hs_html_page (see R1 notes). The page is an `our_members` node today: `node--our-members.tpl.php` wraps it in `#containerOurMemeber` and loads `our-member.css`, which must not style the bands.

**The hs_mcp validator must allow:** `<nav>`; `data-section` with a slug value; class-based styling. For /university-relations and /honorsocietyorg-life: replace the YouTube `<iframe>` with the video facade (its markup passes today), and have the theme load `components/video.js`.

**Missing components:** none. Round 3 added the link row, link list, plan compare, leader profile and video facade.
