Skip to main content
Menu

Components

To use this feature, click on the icon on the toolbar that looks like an atom

Buttons

  • Options for Radius, Round, Expand
  • Option for Normal (blue), Secondary (gray), Success (green), Alert (Red)

 

Campus Map

Insert a static location map inside your layout. Best to use a 2-3 column layout snippet. Button links to location on map.

Note Box

This is a note box. 

Perfect for adding a slight emphasis to a specific message on a page. 

There is also a style available within the WYSIWYG editor of the CMS. To use that style, select the text you want as a box, then select the style. Use "shift+return" to create line breaks, adding just "return" will create a new paragraph and another empty note box. 

The component is self contained.  

Calendar | Date Icon

JULY 4

Organizational | Contact Card

  • Rizzly the Grizzly Mascot Marketing Office Mountie/Mascot/Grizzly Bear Team Mt. SAC!
    (909) 275 - 7500
    Mt. SAC Campus
    Monday - Friday
    8:30 a.m. - 5 p.m.
    About Rizzly
    RizzlyInspired by the grizzly bears once native to our namesake mountain, Rizzly embodies the qualities of strength, intelligence, and confidence. Just as the grizzly navigates the wilderness with astonishing perseverance and determination, Mounties approach their academic and personal journeys with the same spirit.

    Marketing | Mascot

  • Contact Card

    • 400x400 square image (optional)
    • Full Preferred Name
    • Job Title
    • Team
    • Department
    • Pronouns
    • Optional Text 
      • Example Process Payroll (Am-G)
    • Email
    • Phone
    • Mobile (personal phones not recommended)
    • TTY (optional)
    • Zoom (hidden on default)
    • Fax (hidden on default)
    • Bldg. # - Rm. #
    • Work Days
    • Work Hours or Office Hours
    • Details can be hidden (optional)
      • Anything specific like Zoom, Fax Numbers, a short few sentences of yourself, Social Media, etc. 

    Added a variety of themes - July 2025

  • Full Name Job Title Team Department Pronouns Optional Text
    (909) 274 - 7500
    (000) 000 - 0000
    711 (000) 000 - 0000
    (909) 274 - 0000
    Building and Room
    Work Days
    Work Hours
    Details
    . . . is a visual designer for Mt. SAC. She enjoys translating complex ideas into captivating stories. With a career spanning web, brand, and motion design, she crafts compelling experiences that leave a lasting impression.


    FIND ME ELSEWHERE

Organizational | Image Row

  • You need 7 .jpg images
  • Preferably cropped square
  • Upload all 7 images to your website, then publish
  • Mobile displays two rows of 3 images, the 7th is hidden. 

  • Students providing input at outside building 40
  • Listening to feedback from students
  • Gathering feedback from students stretching into the evening.
  • Group planning sessions
  • Interpreting feedback
  • Gathering feedback from students
  • Gathering Feedback

 

Organizational | Tabs

  • Optional: You can hide tabs 2-5 (example shows Tab 3 turned off) 
  • Optional: If you need to insert tabs more than once on a page, each set needs to have a Unique ID. Simply select 1-10. If not unique, the all tabs on the page will update when clicking  the same tab. 
  • Tabs stack on mobile devices.
Tab 1

Insert your content here...

Note: Tabs 2-5 can be hidden (example tab 3 is hidden)

 

Organizational | Icon Blocks

  • 2 - 7 Blocks with fontawesome icons 
  • Option to turn off icon block, be sure to remove a font-icon-name if no icon is desired.
  •  
  • Headline 1
    • Content 1
     
  • Headline 2 (hidden icon)
    • Content 2
     
  • Headline 3
    • Content 3
     
  • Headline 1 Content 1
    Next 
  • Headline 2 Content 2
    Next 
  • Headline 3 Content 3
    Next 
  • Headline 4 Content 4
    Next 
  • Headline 5 Content 5
    Next 
  • Headline 6 Content 6
    Next 
  • Headline 7 Content 7
     

Organizational | Timeline

  • 5 - 7 Dates with info. 
  • Multiple Themes

2025

Description

  • list
  • list
  • list

Classes

Graduation

 

  • Icons

    • Want to insert a specific Font Awesome Icon in your text?
    • This is not for changing icons within individual snippets.
    • Perfect for use in Headings and Paragraphs

    Enlarged Sample:  
    <span style="font-size: 10rem"> component </span>

      • Brands

        Brands
        If you don't see your selection, it is likely you will need to check that the font is set to "brands". Duotone, and other styles are not available for brands. 

        • Facebook

        • X-Twitter

      • Classic

        Classic

        • Solid

        • Regular

        • Light

        • Thin

      • DuoTone
        Duotone

        Primary is the solid, Secondary is the 40% value shown on Font Awesome's website. Options of opacity are 40, 60/80, 100%

        • 100% + 40% 

        • 40% + 100%

        • 100% + 100%

        • Two Colors 100% + 100%

      • Sharp

        Sharp  

        • Solid

        • Regular

        • Light

        • Thin

      • Sharp Duotone

        Sharp Duotone

        Font Awesome says more styles are coming

        • Solid

           

      • Sizes

        The size of the icon will change if applied in a body of text, or within a heading tag and any other css styles. (Remember, headings are organizational elements, not design elements and need to be nested is the sequential order.) 

        • 2xl

        • xl

        • l

        • normal

        • s

        • xs

        • 2xs

      • Example Recipes

        Halloween Icon Recipes

        •  

          "pumpkin" | None | blank | Duotone |  2xl
          Green | 100% | Orange | 100% 

        •  

          "jack-o-lantern" | None | blank | Duotone |  2xl
          Poppy | 100% | Orange | 100%

        •  

          "ghost" | None | blank | Duotone |  2xl
          Grape | 100% | Lavender | 60%

        •  

          "bat" | None | blank | Duotone |  2xl
          Green | 100% | Orange | 100%

        •  

          "candy-corn" | None | blank | Duotone |  2xl
          Orange | 100% | Poppy | 100%

        •  

          "cauldron" | None | blank | Duotone |  2xl
          Black | 100% | Light Green | 100%

        •  

          "flask-round-potion" | None | blank | Duotone |  2xl
          Light Green | 100% | Sky Blue | 40%

        •  

          "candy" | None | blank | Duotone |  2xl
          Grape | 100% | Orange | 40%

        •  

          "spider-black-widow" | None | blank | Duotone |  2xl
          Grape | 100% | Orange | 40%

 

Scroll Box

The scroll box allows for keeping content in a column to a specified  vertical height. If the there extra text, a scroll bar will appear. The Organizational | Scroll Box component fills the available width,  in this example I used the Three Column Snippet.  

Examples: 20vh, 60vh, 60vh without mask.

  • Flavour mocha, arabica in, blue mountain frappuccino latte, robust crema shop aged ristretto. Black that dripper sweet caffeine skinny dark con panna grinder cream viennese. Shop that a affogato doppio black single shot.

    Eu, grinder black, id cappuccino affogato sugar macchiato. Single shot ut crema cultivar cup frappuccino cup seasonal chicory. Saucer filter, single origin doppio redeye aromatic decaffeinated barista.

    Whipped redeye coffee espresso rich so beans crema single shot. Skinny, galão, carajillo, white roast beans aromatic espresso aromatic. Kopi-luwak that ristretto affogato con panna single origin to go, black brewed shop extra  steamed.

    (Example: 20vh)
  • Decaffeinated seasonal saucer irish cappuccino kopi-luwak pumpkin spice americano aftertaste. Dark robusta, sit medium organic french press arabica.

    Siphon, iced acerbic dark, filter acerbic espresso arabica dark single origin organic. Fair trade decaffeinated steamed fair trade robusta skinny cup shop.

    Latte robust, frappuccino french press, cinnamon, kopi-luwak as, black pumpkin spice irish affogato plunger pot. Cinnamon coffee mocha cultivar in flavour, java so espresso crema est redeye.

    Doppio latte, grounds, black cream arabica coffee crema. Shop whipped, cream single origin, that ristretto qui variety aftertaste robust est café au lait.

    Viennese, strong medium, beans, brewed french press blue mountain affogato saucer grounds strong. Affogato grounds, con panna filter aged siphon bar  half and half organic aroma.

    Sugar, rich at blue mountain, redeye sit galão crema percolator cortado. Black dripper breve grounds, wings galão mug organic roast.

    (Example: 60vh)
  • Whipped flavour pumpkin spice, mocha wings brewed extra  americano blue mountain cultivar variety. Sugar breve galão turkish, cortado, rich as white grounds seasonal.

    Caffeine grinder half and half rich est dripper and coffee. Medium so cortado dripper kopi-luwak so, est, pumpkin spice percolator strong sweet aromatic.

    Crema so single origin, whipped variety, sweet filter chicory white coffee. Barista single origin blue mountain decaffeinated java galão latte.

    Qui, instant galão viennese mocha dripper body strong fair trade filter. Frappuccino, seasonal redeye id instant, aromatic galão turkish medium decaffeinated aroma.

    Beans americano, cortado french press macchiato cultivar so percolator. Body bar  strong, qui siphon brewed, frappuccino espresso fair trade bar  qui robust.

    Aroma crema plunger pot in half and half decaffeinated that. Aromatic variety mug qui eu at americano.

    (example: 60vh without fading off mask at bottom)

 

Animated Stats

100,125

Quotation Box

  • Available in two themes; Light and Dark.
  • Quotes can be added to the Right, Left, and Center with varying widths.
  • Quotes are centered on mobile devices.  

I've missed more than 9,000 shots in my career. I've lost almost 300 games. Twenty-six times, I've been trusted to take the game-winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed

— Michael Jordan

Some of us have great runways already built for us. If you have one, take off. But if you don't have one, realize it is your responsibility to grab a shovel and build one for yourself and for those who will follow after you.

— Amelia Earhart

Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus varius nec adipiscing dapibus suspendisse penatibus nibh mi sagittis. Eget quam imperdiet parturient potenti aliquet magna conubia metus. Arcu ultrices euismod pretium montes luctus dapibus velit. Placerat in magna congue gravida torquent. Torquent fusce imperdiet interdum nulla aliquet. Phasellus metus morbi; facilisi inceptos eget praesent ridiculus. Vel ridiculus class facilisis lacus fusce vel sollicitudin. Convallis mauris sem torquent nascetur eleifend eleifend.

Ligula et lectus et neque class sagittis vehicula augue varius. Molestie primis penatibus magnis condimentum dignissim duis. Curabitur nulla eu habitant natoque suspendisse. Mi habitant curabitur fringilla cubilia; dui efficitur. Dui curae mi accumsan risus aliquam nibh. Feugiat adipiscing primis mi, sociosqu euismod ultricies laoreet. Risus hac magnis nibh nec nostra. Interdum bibendum id praesent venenatis laoreet curae elementum. Libero enim non blandit pretium suscipit.

Empower yourself with a good education. Then, get out there and use that education to build a country worthy of your boundless promise.

— Michelle Obama

Eget risus porta ligula semper eleifend. Venenatis habitant dignissim feugiat efficitur platea mauris arcu fames. Conubia fames dui ornare posuere; libero euismod? Sociosqu mattis interdum habitasse; augue habitant curae iaculis tempus. Scelerisque tempor elit eu sodales massa litora. Inceptos ultricies sit diam sollicitudin, netus cras ac sapien sit. Ultrices pulvinar feugiat rutrum convallis cubilia. Dolor magna ridiculus hendrerit congue eu sollicitudin diam. Litora euismod lacus rhoncus fusce nam est iaculis velit.

 

 

Image Captions

Illustration of two male students
Caption of Students

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Illustration of students studying in library
Illustration of students studying in library

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Agenda/Minutes 

Snippet "Block Grid Layout" + Component "Organization | Committee Minutes Card" 

  • 2025-2026

    • June 30th
      • Minutes
    • May
      • Minutes
    • April
      • Minutes
    • March
      • Minutes
    • February
      • Minutes
    • January
      • Minutes
    • December
      • Minutes
    • November
      • Minutes
    • September
      • Minutes
    • August
      • Minutes
    • July 1st
      • Minutes

  • 2024-2025

    • June 30th
      • Minutes
    • May
      • Minutes
    • April
      • Minutes
    • March
      • Minutes
    • February
      • Minutes
    • January
      • Minutes
    • December
      • Minutes
    • November
      • Minutes
    • September
      • Minutes
    • August
      • Minutes
    • July 1st
      • Minutes
    •  

  • 2023-2024

    • June 30th
      • Minutes
    • May
      • Minutes
    • April
      • Minutes
    • March
      • Minutes
    • February
      • Minutes
    • January
      • Minutes
    • December
      • Minutes
    • November
      • Minutes
    • September
      • Minutes
    • August
      • Minutes
    • July 1st
      • Minutes
    •  

  • 2022-2023

    • June 30th
      • Minutes
    • May
      • Minutes
    • April
      • Minutes
    • March
      • Minutes
    • February
      • Minutes
    • January
      • Minutes
    • December
      • Minutes
    • November
      • Minutes
    • September
      • Minutes
    • August
      • Minutes
    • July 1st
      • Minutes
    •  


YouTube/Vimeo

 

Organizational | Calendar Date Icon Static

  • Need to promote an event on your page? We suggest LiveWhale, our Online Campus Calendar. 
  • If you need the events stored as a archive on your website for other purposes, this component might be what you need.
NOVEMBER 16
Mt. SAC Farm Day (without details)
Saturday, November 16, 2024
9 a.m. - 2 p.m.
Mt. SAC Farm

 

NOVEMBER 16
Mt. SAC Farm Day (with details)
Saturday, November 16, 2024
9 a.m. - 2 p.m.
Mt. SAC Farm
Details

Farm Day

Saturday, November 16, 2024
9am-2pm at the Mt. SAC Farm.

Farm day is a free community event that is fun for the whole family!  Join us for farm tours, demonstrations, hayrides, a plant sale, pony rides, a petting zoo, milking demonstrations, a fun zone, animals, and more!  Food will be available for purchase.

Presented by: Mt. SAC Agricultural Department, The Orange County Farm Bureau, and Dairy Council of CA

 

Menu Grid

Developed for the CDC 
There are additional styles added on this page in the headcode. (Ask the Web & Portal team for assistance)

 October 28 - November 1

Meal Monday 10/28/2024 Tuesday 10/29/2024 Wednesday 10/30/2024 Thursday 10/31/2024 Friday 11/01/2024
Breakfast
  • WG Cheerios ½ c
  • Peaches ½ c
  • Whole/1% White Milk ¾ c
  • Vanilla Yogurt ½ cup
  • WG Kix Cereal ¾ cup
  • Mandarins ½ cup
  • Whole/1% White Milk ¾ c
  • WG Wheat Bagels ½ ea.
  • Cream Cheese 1 oz.
  • Tropical Fruit ½ c
  • Whole/1% White Milk ¾ c
  • Pumpkin Muffins ½ ea.halloween bat
  • Pears ½ c
  • Whole/1% White Milk ¾ c 
  • WG Rice Chex
  • Cereal ¾ c
  • Tropical Mix ½ cup
  • Whole/1% White Milk ¾ c
Lunch
  • Chicken Alfredo ¾ c.
  • WG Pasta Noodles
  • Chicken & Alfredo Sauce 1.5 oz
  • Carrots ¼ c
  • Pears ¼ c
  • Whole/1% White Milk ¾ c
  • Beef and Rice Casserole ½ c.
  • Green Beans ¼ c.
  • Oranges/Mandarins ¼ c
  • Whole/1% White Milk ¾ c
  • Chicken Sandwich
  • WG Chicken Patty ½ ea.
  • WG Wheat Buns ½ ea.
  • Cooked Carrots ¼ cup
  • Pears ¼ cup
  • Whole/1% White Milk ¾ c
  • Jack - halloween pumpkin- Lantern Pizza
  • WG Wheat Bagel ½ ea.
  • Shredded Cheese 1.5 oz
  • Cali Veggie Mix ¼ c
  • Diced Peaches ¼ c
  • Whole/1% White Milk ¾ c
  • WG Chicken Nuggets 4 ea.
  • Tater Tots ¼ c.
  • Apples/Applesauce ¼ c
  • Whole/1% White Milk ¾ c
Snack
  • Hardboiled Egg ½ ea.
  • Goldfish Crackers ¼ c
  • Cheese Cubes 4 ea.
  • Zesta Crackers 4 ea
  • Low Fat String Cheese 1 ea.
  • Pineapple Tidbits ½ c
  • BOO Smoothies! ¾ c
  • Berry Medley (strawberry, blueberry, raspberry) ½ c
  • Yogurt ¼ c
halloween ghost
  • Cheez-its 1 ea.
  • Diced Peaches ½ c