basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: remove legacy UMASS samples and implement new header navigation and content block snippets

Browse Source
This commit is contained in:
Victor Phan
2026-07-09 16:35:38 +07:00
parent e6d98edc45
commit 479d794b8e
385 changed files with 4125 additions and 82456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/html_snippets/content_main_blocks/block_1_block-multiple-ctas.html
+35
View File
@@ -0,0 +1,35 @@
<body>
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default">
<div class="container">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>Step Into <span class="highlight">Your Future</span>
</h2>
</div>
</div>
<div class="links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/apply" class="button-text-link button-context-light " aria-label="Apply" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-light " aria-label="Majors &amp; Minors" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Majors &amp; Minors </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid" class="button-text-link button-context-light " aria-label="Tuition &amp; Costs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Tuition &amp; Costs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/visit" class="button-text-link button-context-light " aria-label="Take a Tour" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Take a Tour </span>
</a>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_2_section-title.html
+163
View File
@@ -0,0 +1,163 @@
<body>
<div class="cc--component-container cc--tabbed-media-content ">
<div class="c--component c--tabbed-media-content">
<div class="tabbed-media-content-text-col">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>What's Life Like at UMass?</h2>
</div>
<div data-component-id="umass_base:tabbed-container" data-once="tabbed-container">
<div class="tab-labels-container" role="tablist">
<div class="tab-labels-inner">
<a href="https://www.umass.edu/#tabbed-content-campus-life" class="tab-label link-context-dark" role="tab" aria-selected="true" aria-controls="tabbed-content-campus-life">Campus Life</a>
<a href="https://www.umass.edu/#tabbed-content-campus-housing" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-campus-housing">Campus Housing</a>
<a href="https://www.umass.edu/#tabbed-content-dining" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-dining">Dining</a>
<a href="https://www.umass.edu/#tabbed-content-around-amherst" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-around-amherst">Around Amherst</a>
</div>
</div>
<div class="tab-content-container">
<div class="tab-content-panel is-active" id="tabbed-content-campus-life" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Make UMass Your Own </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>Explore big ideas, join vibrant communities, and shape a college experience that’s uniquely yours.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/campus-life/student-activities" class="button-primary button-context-light " aria-label="Learn About Student Activities" data-component-id="umass_base:button">
<span class="button-text"> Learn About Student Activities </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-campus-housing" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Your Campus Home </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>Choose from vibrant residential communities where students live, study, and build lasting friendships steps from the classroom.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/campus-life/living-and-dining" class="button-primary button-context-light " aria-label="Learn About Living at UMass" data-component-id="umass_base:button">
<span class="button-text"> Learn About Living at UMass </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-dining" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Food Worth Talking About </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>Discover why UMass dining is ranked #1 nationally—recognized for quality, variety, and sustainability.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umassdining.com/" class="button-primary button-context-light ext" aria-label="Learn Why UMass is #1 in Dining" data-component-id="umass_base:button" data-extlink="">
<span class="button-text"> Learn Why UMass is #1 in Dining </span>
<svg focusable="false" width="1em" height="1em" class="ext" data-extlink-placement="append" aria-label="(link is external)" viewBox="0 0 80 40" role="img" aria-hidden="false">
<title>(link is external)</title>
<path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"></path>
<path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-around-amherst" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Amherst, Uncommon </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>A vibrant creative culture, great food, and the natural beauty of the Pioneer Valley come together to shape this town’s distinctive, welcoming spirit.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/student-life/life-amherst" class="button-primary button-context-light " aria-label="Learn More About Amherst" data-component-id="umass_base:button">
<span class="button-text"> Learn More About Amherst </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabbed-media-content-media-col">
<div class="tabbed-media-content-media-item is-active with-video" data-tab-id="tabbed-content-campus-life">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg?h=7c5befa5&amp;itok=DZUe-3fS" class=" ls-is-cached lazyloaded" alt="A UMass student plays ping pong." src="./UMass Amherst _ UMass Amherst_files/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-1" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/q0ZxZVbnMqs.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-campus-housing">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Campus-Housing.jpg?h=75081741&amp;itok=6kDcYqy3" class="lazyload" alt="A UMass student sits on her bed in a dorm room.">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-2" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/7D_TnBztQhU.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-dining">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Dining2.jpg?h=75081741&amp;itok=_34BDcqA" class="lazyload" alt="A student gets food at a UMass Amherst dining hall.">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-3" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/YRzZ9aRZ69w.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-around-amherst">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Downtown-Amherst.jpg?h=75081741&amp;itok=irWjha4q" class="lazyload" alt="A UMass student holds a hote bag that reads &quot;I Love Amherst.&quot;">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-4" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/agqIJlJpbAY.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_3_button.html
+39
View File
@@ -0,0 +1,39 @@
<body>
<div class="cc--component-container cc--stats-block ">
<div class="c--component c--stats-block">
<div class="f--field f--stats-block">
<div class="cc--component-container cc--stat">
<div class="c--component c--stat">
<div class="f--field f--stat-number">#1</div>
<div class="f--field f--description">
<p>Public Research University in New England, <br>Non-Medical School R&amp;D Expenditures </p>
</div>
</div>
</div>
<div class="cc--component-container cc--stat">
<div class="c--component c--stat">
<div class="f--field f--stat-number">251</div>
<div class="f--field f--description">
<p>Total Degree Programs</p>
</div>
</div>
</div>
<div class="cc--component-container cc--stat">
<div class="c--component c--stat">
<div class="f--field f--stat-number">Top 50</div>
<div class="f--field f--description">
<p>Best Value Colleges (Public), <em>The Princeton Review</em>
</p>
</div>
</div>
</div>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/why-umass/about-umass-amherst/umass-amherst-numbers" class="button-primary button-context-light " aria-label="UMass Amherst By The Numbers" data-component-id="umass_base:button">
<span class="button-text"> UMass Amherst By The Numbers </span>
</a>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_4_image-link-grid.html
+86
View File
@@ -0,0 +1,86 @@
<body>
<div class="paragraph paragraph--type--quad-card-grid paragraph--view-mode--default paragraph--quad-card-grid" data-component-id="umass_base:image-link-grid">
<div class="qcg">
<div class="qcg__left">
<h2 class="qcg__title"> Excellence in Action </h2>
<div class="qcg__description">
<div>
<p>UMass Amherst advances academic excellence through research, teaching, and engagement across campus. Students and faculty drive discovery through programs, scholarship, and events that extend beyond the classroom.</p>
</div>
</div>
<div class="qcg__link">
<a href="https://www.umass.edu/gateway/why-umass/discover-ideas" class="ext" target="_self" aria-label="Discover Ideas Discover Ideas" rel="noopener noreferrer"> Discover Ideas </a>
</div>
</div>
<div class="qcg__right">
<div class="qcg__grid">
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=ysOMEN8V 400w, /sites/default/files/styles/4_3_800x600/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=jtWz1GCX 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=xAxf5s8X 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=3yPPf8f1 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/FY26UMass_HackUMass_LANDING.jpg" alt="A group of five students lean over laptops in a classroom">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/umass-stories/hackumass" class="qcg-item__cta" target="_self" aria-label="HackUMass: Code, Collaborations &amp; Big Ideas HackUMass: Code, Collaborations &amp; Big Ideas"> HackUMass: Code, Collaborations &amp; Big Ideas </a>
</div>
</div>
</div>
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=4PUBT11w 400w, /sites/default/files/styles/4_3_800x600/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=r72eJsZX 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=HXie2chE 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=ufOsI9X8 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/UPC2025__HERO_2000x1125.jpg" alt="Tinashe performs at the Spring Concert.">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/umass-stories/inside-upc" class="qcg-item__cta" target="_self" aria-label="Inside UPC: Student-Led Events With Lasting Impact Inside UPC: Student-Led Events With Lasting Impact"> Inside UPC: Student-Led Events With Lasting Impact </a>
</div>
</div>
</div>
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=jVpB7bGa 400w, /sites/default/files/styles/4_3_800x600/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=CcG3pX7V 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=mDWs6wTt 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=cgBcz7LE 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/FY26_BeTheFuture_WeAreRev_photo4.jpg" alt="Two students work with building tools.">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/umass-stories/changemakers-making" class="qcg-item__cta" target="_self" aria-label="Changemakers in the Making: Be the Future You Want to See Changemakers in the Making: Students Aren&#39;t Just Waiting for the Future, They&#39;re Making It"> Changemakers in the Making: Be the Future You Want to See </a>
</div>
</div>
</div>
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=Idf4wkAD 400w, /sites/default/files/styles/4_3_800x600/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=WUqiETKc 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=p7De2fBX 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=AEX7-hAe 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/2025_Vy_Do_7780_John_Solem_2000x1125.jpg" alt="Vy Do in UMas Amherst biomedical engineering lab">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/research/stories/rising-researchers/biomedical-engineering-nanomedicine-drug-delivery" class="qcg-item__cta" target="_self" aria-label="Biomedical Engineering Research to Advance Drug Delivery Biomedical Engineering Research to Advance Drug Delivery: Vy Do ’26 conducts research to develop nanocarriers for therapeutic genetic materials to treat traumatic brain injuries and other neurological conditions."> Biomedical Engineering Research to Advance Drug Delivery </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_5_section-title.html
+71
View File
@@ -0,0 +1,71 @@
<body>
<div class="cc--component-container cc--card-grid dark">
<div class="c--component c--card-grid">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>Blaze Your Own Trail</h2>
</div>
<div data-component-id="umass_base:description" class="f--section-title f--description">
<p>Discover more than 100 undergraduate majors, minors, and certificates in fields ranging from engineering to public health to literature. You can even design your own major through our individual concentration program. Whatever your path, UMass gives you the freedom to explore and the tools to excel.</p>
</div>
</div>
<div class="f--field f--cards nested">
<div class="cc--component-container cc--card-grid-card ">
<div class="c--component c--card-grid-card">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/16_9_320x180/public/2025-09/FY26_BeTheFuture-HERO_professor-with-students.jpg?h=854a7be2&amp;itok=sAJtETQj" class=" lazyloaded" alt="A professor walks with students in the rooftop garden of the Olver Design Building." src="./UMass Amherst _ UMass Amherst_files/FY26_BeTheFuture-HERO_professor-with-students.jpg">
</div>
<div class="text-container">
<h3 class="ally-focus-within"> Find a Program </h3>
<div data-component-id="umass_base:description" class="f--description">
<p>With more than 100 majors, you have the freedom to explore your interests and build an academic path that reflects who you are and where you want to go.</p>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-dark " aria-label="Read more About Find a Program" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Read more </span>
</a>
</div>
</div>
</div>
</div>
<div class="cc--component-container cc--card-grid-card ">
<div class="c--component c--card-grid-card">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/16_9_320x180/public/2025-11/UMass%20Amherst%20Drone%20Campus.jpeg?h=c673cd1c&amp;itok=SB-3t1IF" class=" lazyloaded" alt="UMass Amherst Drone Campus" src="./UMass Amherst _ UMass Amherst_files/UMass Amherst Drone Campus.jpeg">
</div>
<div class="text-container">
<h3 class="ally-focus-within"> Design Your Own Major </h3>
<div data-component-id="umass_base:description" class="f--description">
<p>Through the Bachelor’s Degree with Individual Concentration (BDIC) Program, students can create a personalized major, blending courses across fields to explore passions beyond traditional academic boundaries.</p>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/umass-stories/design-your-own-major" class="button-text-link button-context-dark " aria-label="Read more About Design Your Own Major" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Read more </span>
</a>
</div>
</div>
</div>
</div>
<div class="cc--component-container cc--card-grid-card ">
<div class="c--component c--card-grid-card">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/16_9_320x180/public/2024-01/FY23-Study-abroad-LANDING-HERO-London-SA_0.jpg?h=854a7be2&amp;itok=KyMO_bgM" class=" lazyloaded" alt="UMass Amherst Study Abroad London" src="./UMass Amherst _ UMass Amherst_files/FY23-Study-abroad-LANDING-HERO-London-SA_0.jpg">
</div>
<div class="text-container">
<h3 class="ally-focus-within"> Study Abroad </h3>
<div data-component-id="umass_base:description" class="f--description">
<p>Global learning opportunities immerse students in new cultures, expanding their perspectives and preparing them to thrive in a connected world.</p>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/umass-stories/study-abroad-umass" class="button-text-link button-context-dark " aria-label="Read more About Study Abroad" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Read more </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_6_block-multiple-ctas.html
+34
View File
@@ -0,0 +1,34 @@
<body>
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-link-style="buttons" data-layout-variant="default">
<div class="container">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>APPLY TODAY</h2>
</div>
</div>
<div class="links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/first-year-students" class="button-primary button-context-light " aria-label="First Year Apply to UMass Undergraduate" target="_self" data-component-id="umass_base:button">
<span class="button-text"> First Year </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/transfer-students" class="button-primary button-context-light " aria-label="Transfer Apply to UMass as as Transfer Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Transfer </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/apply/international-students" class="button-primary button-context-light " aria-label="International Apply to UMass Internationally" target="_self" data-component-id="umass_base:button">
<span class="button-text"> International </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/graduate/apply" class="button-primary button-context-light " aria-label="Graduate School Apply to UMass Graduate School" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Graduate School </span>
</a>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_7_block-multiple-ctas.html
+207
View File
@@ -0,0 +1,207 @@
<body>
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-color="gray" data-layout-variant="tabbed">
<div class="container">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>I'm Looking For...</h2>
</div>
</div>
<div class="links-container">
<div data-component-id="umass_base:tabbed-container" data-color="gray" data-once="tabbed-container">
<div class="tab-labels-container" role="tablist">
<div class="tab-labels-inner">
<a href="https://www.umass.edu/#tabbed-content-prospective-students" class="tab-label link-context-light" role="tab" aria-selected="true" aria-controls="tabbed-content-prospective-students">Prospective Students</a>
<a href="https://www.umass.edu/#tabbed-content-current-students" class="tab-label link-context-light" role="tab" aria-selected="false" aria-controls="tabbed-content-current-students">Current Students</a>
<a href="https://www.umass.edu/#tabbed-content-parents--families" class="tab-label link-context-light" role="tab" aria-selected="false" aria-controls="tabbed-content-parents--families">Parents &amp; Families</a>
<a href="https://www.umass.edu/#tabbed-content-faculty--staff" class="tab-label link-context-light" role="tab" aria-selected="false" aria-controls="tabbed-content-faculty--staff">Faculty &amp; Staff</a>
</div>
</div>
<div class="tab-content-container">
<div class="tab-content-panel is-active" id="tabbed-content-prospective-students" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/visit" class="button-text-link button-context-light " aria-label="Visit Campus" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Visit Campus </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions" class="button-text-link button-context-light " aria-label="Apply as a First-Year Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply as a First-Year Student </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs?field_level_of_study=36&amp;field_degree_type=All&amp;field_delivery=All&amp;field_area_of_interest=All&amp;field_school=All&amp;sort_by=title" class="button-text-link button-context-light " aria-label="Majors &amp; Minors" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Majors &amp; Minors </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/transfer-students" class="button-text-link button-context-light " aria-label="Apply as a Transfer Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply as a Transfer Student </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/graduate/apply" class="button-text-link button-context-light " aria-label="Apply as a Graduate Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply as a Graduate Student </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/important-dates-deadlines" class="button-text-link button-context-light " aria-label="Important Dates &amp; Deadlines" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Important Dates &amp; Deadlines </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/undergraduate-costs" class="button-text-link button-context-light " aria-label="Tuition &amp; Costs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Tuition &amp; Costs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/undergraduate" class="button-text-link button-context-light " aria-label="Financial Aid" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Financial Aid </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-current-students" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.spire.umass.edu/" class="button-text-link button-context-light " aria-label="SPIRE" target="_self" data-component-id="umass_base:button">
<span class="button-text"> SPIRE </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/canvas" class="button-text-link button-context-light " aria-label="Canvas" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Canvas </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/registrar/academic-calendar" class="button-text-link button-context-light " aria-label="Academic Calendar" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Academic Calendar </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/student-employment" class="button-text-link button-context-light " aria-label="Student Jobs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Student Jobs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/contact-us" class="button-text-link button-context-light " aria-label="Contact List" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Contact List </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/bursar/" class="button-text-link button-context-light " aria-label="Bursar&#39;s Office" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Bursar's Office </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/student-life/live-on-campus" class="button-text-link button-context-light " aria-label="Residential Life" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Residential Life </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/it-guide-students" class="button-text-link button-context-light " aria-label="Technology Support" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Technology Support </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-parents--families" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/registrar/academic-calendar" class="button-text-link button-context-light " aria-label="Academic Calendar" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Academic Calendar </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/visit/visitor-info" class="button-text-link button-context-light " aria-label="Campus Maps" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Campus Maps </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://events.umass.edu/" class="button-text-link button-context-light " aria-label="Campus Events" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Campus Events </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/new-student/family-ready-u" class="button-text-link button-context-light " aria-label="New Families" target="_self" data-component-id="umass_base:button">
<span class="button-text"> New Families </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/new-student/family-programs" class="button-text-link button-context-light " aria-label="Family Programs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Family Programs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/contact-us" class="button-text-link button-context-light " aria-label="Contact List" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Contact List </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/bursar/" class="button-text-link button-context-light " aria-label="Bursar&#39;s Office" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Bursar's Office </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/undergraduate" class="button-text-link button-context-light " aria-label="Financial Aid" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Financial Aid </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-faculty--staff" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.spire.umass.edu/" class="button-text-link button-context-light " aria-label="SPIRE" target="_self" data-component-id="umass_base:button">
<span class="button-text"> SPIRE </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/canvas" class="button-text-link button-context-light " aria-label="Canvas" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Canvas </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/peoplefinder/" class="button-text-link button-context-light " aria-label="People Finder" target="_self" data-component-id="umass_base:button">
<span class="button-text"> People Finder </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/contact-us" class="button-text-link button-context-light " aria-label="Contact List" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Contact List </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://hr-direct.hcm.umasscs.net/psc/hcm/EMPLOYEE/HRMS/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL" class="button-text-link button-context-light ext" aria-label="HR Direct" target="_self" data-component-id="umass_base:button" data-extlink="">
<span class="button-text"> HR Direct </span>
<svg focusable="false" width="1em" height="1em" class="ext" data-extlink-placement="append" aria-label="(link is external)" viewBox="0 0 80 40" role="img" aria-hidden="false">
<title>(link is external)</title>
<path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"></path>
<path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"></path>
</svg>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/hr/" class="button-text-link button-context-light " aria-label="Human Resources" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Human Resources </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/hr/careers" class="button-text-link button-context-light " aria-label="Career Opportunities" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Career Opportunities </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/email" class="button-text-link button-context-light " aria-label="Email Support" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Email Support </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_8.html
+6
View File
@@ -0,0 +1,6 @@
<body>
<div class="cc--component-container cc--spacer ">
<div class="c--component c--spacer"></div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
sisvietnamvn_main/html_snippets/content_main_blocks/block_9.html
+337
View File
@@ -0,0 +1,337 @@
<body>
<div class="cc--component-container cc--news-events ">
<div class="c--component c--news-events">
<div class="news-events-section__header">
<h2 class="news-events-section__main-title"> NEWS &amp; EVENTS </h2>
<a class="news-events-section__cta news-events-section__cta--desktop" href="https://www.umass.edu/news/news-events"> More News &amp; Events </a>
</div>
<h3 class="section-title"> FEATURED ARTICLES </h3>
<div class="featured-grid">
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/NEWS-Operating Room Surgery viaAdobeStock.jpeg" width="1280" height="720" alt="Medical Team Performing Surgical Operation in Modern Operating Room">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/scheduling-surgeons-umass-amherst-researchers-identify-factors-could-influence" rel="bookmark">
<span>Scheduling Surgeons: UMass Amherst Researchers Identify Factors That Could Influence Hospital Efficiency</span>
</a>
</h3>
<div class="news-card__date"> June 24, 2026 </div>
</div>
</article>
</div>
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/Yanfei Xu polymer figure.jpg" width="1280" height="720" alt="An illustration of THDBT (tetrahydroxy deoxybenzoin triazole) filler aggregates at the molecular level. In this “slow chaos” state, there are fewer vibrational pathways available for heat transport, resulting in lower thermal conductivity. Reproduced from Materials Horizons with permission from the Royal Society of Chemistry.">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/umass-amherst-led-team-discovers-new-way-make-thermally-insulative-plastics" rel="bookmark">
<span>UMass Amherst-Led Team Discovers New Way to Make Thermally Insulative Plastics </span>
</a>
</h3>
<div class="news-card__date"> June 22, 2026 </div>
</div>
</article>
</div>
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/Anthropology Field School Dig-26.jpg" width="1280" height="720" alt="Students dig during UMass Amherst’s Bioarchaeology and Forensic Anthropology Field School">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/646" hreflang="en">Academics</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/umass-bioarchaeology-and-forensic-anthropology-field-school-gives-students-hands" rel="bookmark">
<span>UMass Bioarchaeology and Forensic Anthropology Field School Gives Students Hands-On Experience in Forensic Anthropology</span>
</a>
</h3>
<div class="news-card__date"> June 17, 2026 </div>
</div>
</article>
</div>
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/NEWS-deli slicer.jpg" width="1280" height="720" alt="A worker slicing deli meat">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/hands-why-human-touch-can-create-food-safety-blind-spot" rel="bookmark">
<span>Hands Off: Why Human Touch Can Create a Food-Safety Blind Spot </span>
</a>
</h3>
<div class="news-card__date"> June 17, 2026 </div>
</div>
</article>
</div>
</div>
<div class="news-events-row">
<div class="news-column">
<h3 class="section-title--news"> LATEST NEWS </h3>
<div class="news-list">
<div class="news-list__item">
<article class="news-teaser">
<div class="news-teaser__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/UMass Police Chief Tyrone Parham, Max Callahan, Senator Comerford on MA Senate Rostrum_crop.jpg" width="2833" height="1769" alt="UMass Police Chief Tyrone Parham, Max Callahan and Senator Comerford stand at the Massachusetts Senate Rostrum">
</div>
</div>
<div class="news-teaser__content">
<div class="news-list__category">
<a href="https://www.umass.edu/taxonomy/term/1001" hreflang="en">University News</a>
</div>
<h3 class="news-teaser__title">
<a href="https://www.umass.edu/news/article/umass-amherst-supported-effort-help-drivers-autism-interact-police-becomes-law" rel="bookmark">
<span>UMass Amherst-Supported Effort to Help Drivers with Autism Interact with Police Becomes Law </span>
</a>
</h3>
<div class="news-teaser__summary">
<div>
<p>A new law signed by Gov. Maura Healey aimed at helping people with autism during interactions with police has roots on the UMass Amherst campus. The so-called “Blue Envelope Bill” sets up a voluntary program where drivers or passengers can provide information helpful to law enforcement during traffic stops or other encounters.&nbsp;</p>
</div>
</div>
</div>
</article>
</div>
<div class="news-list__item">
<article class="news-teaser">
<div class="news-teaser__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/Giuliano Roberts Eye-Tracking IV Pumps Photo 2.jpg" width="4528" height="3016" alt="A student (left) wears eye-tracking glasses as doctoral student Seonhun Lee holds a laptop showing information about the study completed using the technology.">
</div>
</div>
<div class="news-teaser__content">
<div class="news-list__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-teaser__title">
<a href="https://www.umass.edu/news/article/eye-tracking-technology-helps-researchers-see-iv-pump-safety-through-student-nurses" rel="bookmark">
<span>Eye-Tracking Technology Helps Researchers See IV Pump Safety Through Student Nurses’ Eyes</span>
</a>
</h3>
<div class="news-teaser__summary">
<div>
<p>The approach, detailed in a study published in the June 2026 issue of Advancing Medical-Surgical Nursing, marks the first known use of eye-tracking technology to evaluate IV smart pumps.</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="events-column">
<h3 class="events-title"> Events </h3>
<div class="events-widget">
<script type="text/javascript" src="./UMass Amherst _ UMass Amherst_files/view"></script>
<style>
/* ========================================== CAMPUS EVENTS ========================================== */
.campus-events-widget {
background: transparent;
padding: 0;
font-family: inherit;
}
.campus-events-widget .events-list {
list-style: none;
margin: 0;
padding: 0;
}
/* ========================================== DESKTOP LIST LAYOUT ========================================== */
.campus-events-widget .teaser-item {
padding: 20px 0;
border-bottom: 1px solid #e5e5e5;
}
.campus-events-widget .teaser-item:last-child {
border-bottom: none;
}
.campus-events-widget .event-wrapper {
display: flex;
gap: 20px;
align-items: flex-start;
}
/* ===================================== DATE BLOCK ===================================== */
.campus-events-widget .event-date {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.125rem;
padding: 0.25rem;
background: #881C1C;
width: 2.875rem;
height: 3.125rem;
box-sizing: border-box;
}
.campus-events-widget .event-date__month {
font-size: 1rem;
font-weight: 800;
line-height: 1.25rem;
text-transform: uppercase;
text-align: center;
color: #fff;
}
.campus-events-widget .event-date__day {
font-size: 1rem;
font-weight: 800;
line-height: 1.25rem;
text-transform: uppercase;
text-align: center;
color: #fff;
}
/* ===================================== EVENT DETAILS ===================================== */
.campus-events-widget .event-details {
flex: 1;
position: relative;
}
/* Title */
.campus-events-widget .event-title {
font-size: 1rem;
font-weight: 800;
line-height: 1.25rem;
text-transform: uppercase;
color: #000;
position: relative;
margin: 0 0 0.375rem;
padding-right: 1.25rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.campus-events-widget .event-title a {
color: #222;
text-decoration: none;
}
.campus-events-widget .event-title a:hover {
color: #881c1c;
}
/* Chevron */
.campus-events-widget .event-title::after {
content: "";
position: absolute;
right: 0;
top: 0.2rem;
width: 0.3125rem;
height: 0.6875rem;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg width='5' height='11' viewBox='0 0 5 11' fill='none'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M4.57143 5.14286L0 0V10.2857L4.57143 5.14286Z'fill='%23881C1C'/%3E%3C/svg%3E"); } /* Time */ .campus-events-widget .event-time { font-size: 16px; color: #000; margin-bottom: 4px; } /* Location */ .campus-events-widget .event-location { font-size: 1rem; font-weight: 400; line-height: 1.5rem; font-style: normal; color: #000; } /* Hide summaries */ .campus-events-widget .summary, .campus-events-widget .event-description { display: none !important; } /* ========================================== MOBILE CARD DESIGN ========================================== */ @media (max-width: 768px) { .campus-events-widget .event-title { font-size: 0.75rem; } .campus-events-widget .event-time { font-size: 0.75rem; } .campus-events-widget .event-location { font-size: 0.75rem; } .campus-events-widget .event-wrapper { display: flex; flex: 1; padding-right: 10px; align-items: stretch; gap: 12px; border: 1px solid #CCC; } .campus-events-widget .event-date { display: flex; padding: 4px 8px; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; background: #881C1C; min-width: 48px; height: auto; } .campus-events-widget .event-details { padding: 8px 10px 8px 0; } .campus-events-widget .teaser-item { flex: 0 0 279px; display: flex; border: 0px solid #CCC; padding-bottom: 0; } .campus-events-widget .events-list { display: flex; gap: 1rem; } .campus-events-widget .events-list::before, .campus-events-widget .events-list::after { content: ""; flex: 0 0 8.333%; } } /* ========================================== SMALL MOBILE ADJUSTMENTS ========================================== */ @media (max-width: 480px) { .campus-events-widget .event-wrapper { gap: 10px; } .campus-events-widget .event-date__day { font-size: 18px; } }
</style>
<div id="lw" class="campus-events-widget">
<div class="events-list">
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 07 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/hr-is-here-for-you-5678?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> HR is Here for You </a>
</div>
<div class="event-time"> 10:00 am – 4:00 pm </div>
<div class="event-location"> UMass Downtown </div>
</div>
</div>
</div>
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 07 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/ms-in-accounting-virtual-information-session-1380?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> MS in Accounting Virtual Information Session </a>
</div>
<div class="event-time"> 12:00 pm – 1:00 pm </div>
<div class="event-location"></div>
</div>
</div>
</div>
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 07 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/thrive-at-five-summer-yoga-and-mindfulness-series?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> Thrive at Five - Summer Yoga and Mindfulness Series </a>
</div>
<div class="event-time"> 5:00 pm – 6:00 pm </div>
<div class="event-location"> Orchard Hill Pavilion </div>
</div>
</div>
</div>
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 08 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/online-or-hybrid-ms-in-cs-virtual-info-session-6202?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> Online or Hybrid MS in CS: Virtual Info Session </a>
</div>
<div class="event-time"> 10:00 am – 11:00 am </div>
<div class="event-location"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="news-events-section__footer">
<a class="news-events-section__cta news-events-section__cta--mobile" href="https://www.umass.edu/news/news-events"> More News &amp; Events </a>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>