Skip to page content
In This Section

The YCCD CMS System offers numerous predefined components and code snippets that can make it easier to add advanced functionality to your webpages. Below, you'll find a list of the most commonly used Snippets & Components, along with demonstrations of their appearance and example content.

Snippets

Accordion Snippet

Carousel

A carousel is a snippet for displaying photos in a slide-show format. A carousel should never be used for flyers or graphics.

Carousel Image 1
Carousel Image 1
Carousel Image 1

    Columns Snippet

    Column 1

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Nam ex enim, finibus vel orci et, tristique molestie magna.
    • Aliquam vel ligula ac nunc varius dapibus rhoncus sed mi.
    • Sed nec lorem id erat convallis hendrerit id in diam.
    • Mauris tempus efficitur nibh in dignissim. Vestibulum commodo vestibulum odio.
    • Sed sed vehicula magna.
    • Vivamus vel commodo mi.
    • Aenean a nunc odio.
    • Sed pharetra lectus in ante imperdiet, ut laoreet enim finibus.
    • Donec vel felis rutrum, volutpat felis ut, accumsan ex.

    Column 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ex enim, finibus vel orci et, tristique molestie magna. Aliquam vel ligula ac nunc varius dapibus rhoncus sed mi. Sed nec lorem id erat convallis hendrerit id in diam. Mauris tempus efficitur nibh in dignissim. Vestibulum commodo vestibulum odio. Sed sed vehicula magna. Vivamus vel commodo mi. Aenean a nunc odio. Sed pharetra lectus in ante imperdiet, ut laoreet enim finibus. Donec vel felis rutrum, volutpat felis ut, accumsan ex.

    Pellentesque vel tristique sapien. Nulla facilisi. Nam euismod ligula non lacus mollis bibendum. Curabitur a auctor dui. Vestibulum lorem eros, tempor eu nunc in, tincidunt pharetra metus. 

    Table Snippet

    Tables are for tabular data only. They should not be used for layout of information. Bulleted lists are generally the best way to convey complex information. The columns snippet is the preferred way to creat a multi-column layout. 

    Heading 1
    1
    Table Text
    Table Text
    Heading 2
    2
    Table Text
    Table Text
    Heading 3
    3
    Table Text
    Table Text
    Heading 4
    4
    Table Text
    Table Text

    Tabs Snippet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ex enim, finibus vel orci et, tristique molestie magna. Aliquam vel ligula ac nunc varius dapibus rhoncus sed mi. Sed nec lorem id erat convallis hendrerit id in diam. Mauris tempus efficitur nibh in dignissim. Vestibulum commodo vestibulum odio. Sed sed vehicula magna. Vivamus vel commodo mi. Aenean a nunc odio. Sed pharetra lectus in ante imperdiet, ut laoreet enim finibus. Donec vel felis rutrum, volutpat felis ut, accumsan ex.
    Pellentesque vel tristique sapien. Nulla facilisi. Nam euismod ligula non lacus mollis bibendum. Curabitur a auctor dui. Vestibulum lorem eros, tempor eu nunc in, tincidunt pharetra metus. 
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Nam ex enim, finibus vel orci et, tristique molestie magna.
    • Aliquam vel ligula ac nunc varius dapibus rhoncus sed mi.
    • Sed nec lorem id erat convallis hendrerit id in diam.
    • Mauris tempus efficitur nibh in dignissim. Vestibulum commodo vestibulum odio.
    • Sed sed vehicula magna.
    • Vivamus vel commodo mi.
    • Aenean a nunc odio.
    • Sed pharetra lectus in ante imperdiet, ut laoreet enim finibus.
    • Donec vel felis rutrum, volutpat felis ut, accumsan ex.

    Components

    Card Blocks Component

    Card Block

    Convey short information in an eye-catching way.

    This is a link
    Another Card Block

    Create multiple card blocks using one component!

    A Different Link

    Contact Component

    The contact component is the standardized way to display contact information across the site. It works well inside of a columns snippet if you need to provide contact information for multiple people.

    No member found with the email yccdwebmaster@yosemite.edu.

    CTA Banner Component

    Call-To-Action Banner
    A CTA Banner is a way to draw the eye to the most important action you want a student to take when they visit your page. Use at most 1 CTA Banner Per Page.
    Call To ActionSecondary CTA

    CTA Box Component

    The box component is identical to the CTA Banner Component, only it does not include any buttons for actions. Can be used to call out important content.

    CTA Box Component
    Some very important text will probably be placed here someday. 

    Image Announcement Component

    MJC Student taking an online class

    Image Announcement

    An image announcement is an announcement paired with an image. Always use a photo, and pair it with the relevant text. It will always contain a call-to-action button too.

    Call to Action

    Image Block Component

    MJC Student taking an online class
    Image Block

    The Image Block component provides space for a single large image, plus a descriptive short paragraph and a hyperlink.

    Link goes here

    Image Detail Component

    Left /_resources/images/college-location-img1.png Modesto Junior College Community Science Center MJC Community Science Center Visit the MJC Community Science Center today, and explore the Great Valley Museum, planetarium, and so much more!

    Image Quote Component

    Left Image Quote Component Great web images should always have quotes! - William Shakespeare /_resources/images/career-outlook-bg.png Columbia College Library Visit Today https://www.gocolumbia.edu

     

    Key Support Resources Component

    Key Support Resources
    Resource #1
    Resource Link 2
    Third Resource Link

    Quote Block Component

    Quote Block

    This is a space where you can put a quote

    Joshua SigmanFront-end Web Developer

    Video Component

    Video Component

    This component is for embedding videos from YCCD's Official YouTube Channel or other online video resources

    In This Section