Components and Patterns

A page to reference to see how we have abstracted atoms, molecules, and organisms. Use this page as a way to test adjacent sibling background gradients, and colors

On This Page

    Shuffle all the components below

    This is a small single-use jQuery utility function to allow us to randomize section order. This should be removed from app.js after integration

    Masters Program Comparison

    Master of Forestry (MF)

    Focus

    Lorem Ipsum
    Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

    Outcomes

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    More Information

    Master of Environmental Management (MEM)

    Focus

    Gaining an in-depth understanding of one area — a specialization — while also offering the flexibility to explore other disciplines and subject areas.

    Outcomes

    Graduates of the program are next-generation leaders, working across disciplines and sectors to tackle the world’s most pressing environmental challenges.

    More Information

    Master of Forest Science (MFS)

    Focus

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Outcomes

    Nisl nunc mi ipsum faucibus vitae aliquet. Mauris a diam maecenas sed enim ut. In nibh mauris cursus mattis.

    More Information

    Master of Environmental Science (MESc)

    Focus

    Lorem Ipsum
    Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

    Outcomes

    Nisl nunc mi ipsum faucibus vitae aliquet. Mauris a diam maecenas sed enim ut. In nibh mauris cursus mattis.

    More Information

    Incidunt aliquid sunt odio id nam deserunt. Illum repellat incidunt nostrum aspernatur, numquam enim, fugit necessitatibus assumenda odio non eaque? Necessitatibus possimus impedit placeat consequuntur autem blanditiis iure magni numquam debitis. Optio possimus cum necessitatibus ut nihil nesciunt saepe libero, perspiciatis sunt, perferendis beatae ipsum, corrupti officiis! Eius, corporis. Dolor, ipsam nam.

    H2 Heading Text

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem2 ipsum dolorfootnote sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Longpersonfirstname Longpersonlastname

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.

    H3 Heading Text

    Blockquote text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • Lorem ipsum dolor scelerisque nisl consectetur et.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. scelerisque nisl consectetur et.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • Lorem ipsum dolor scelerisque nisl consectetur et.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. scelerisque nisl consectetur et.
    Country Capital Language Spoken GDP
    Austria Vienna German $386.4 Billion USD
    Morocco Rabat Arabic $2,832.43 Billion USD
    El Salvador San Salvador Spanish $4,223,58 Billion USD
    Japan Tokyo Japanese $4.939 Trillion USD

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ea quod voluptatibus praesentium voluptatum obcaecati natus, modi ex sunt cumque similique quia saepe maxime iure vitae? Quisquam, voluptates, fugit quae ullam consequuntur nesciunt provident doloremque officiis nostrum itaque possimus voluptatem.

    placeholder
    Caption Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    Minus, necessitatibus! Est veniam, natus deleniti nobis quaerat nostrum dolorem? Blanditiis odio corrupti molestiae accusantium placeat sunt, quo repudiandae dolore animi! Odio suscipit accusantium et, sed repellat nisi error voluptatum vitae maxime qui officiis maiores dicta dignissimos repellendus quas eum?

    Button Default

    Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Aenean eu leo quam.

    Amet consectetur adipisicing elit. Neque cum nihil corporis quisquam nobis sed. Optio praesentium eum culpa magnam neque numquam nulla eius explicabo magni?

    Description of image
    Stat Feature

    500+ Alumni

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.
    Explore MF Careers

    Paper in a Page

    Eyebrow Text

    Healthy soils protect corn yields and lower crop insurance payouts under drought

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Abstract title

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    abstract image
    This graph shows that corn yields increase with soil organic matter content (SOM %), with the effect becoming more pronounced with increasing drought severity.

    Admissions

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Tuition & Financial Aid

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Description of image
    Stat Feature

    500+ Alumni

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.
    Explore MF Careers

    YSE In Action

    Anastas Honored by German Chemical Society

    Professor Paul Anastas was one of two recipients of the Augustus Wilhelm von Hofmann Medal 2022. Anastas received the award with colleague John Warner, founder of the Warner Babcock Institute of Green Chemistry, "as the founders of the concept of green chemistry, for which they not only laid the scientific and intellectual foundations, but also realized concrete implementations….including laying the foundation for sustainable chemical product development and the interdisciplinary integration of green chemistry at universities."

    Anastas also received the Volvo Environment Prize in 2021.

    Description of the image

    Paul Anastas

    Teresa and H. John Heinz III Professor in the Practice of Chemistry for the Environment and Director of the Center for Green Chemistry and Green Engineering at Yale

    John Warner

    Founder of the Warner Babcock Institute of Green Chemistry

    2022 Augustus Wilhelm von Hoffmann Medal

    Bestowed by the German Chemical Society only in even years to chemists outside Germany or to Germans who are not chemists but have made significant contributions to the field.

    Doctoral Student Duo Wins Prestigious British Ecological Society Prize

    Kristy Ferraro and Diego Ellis-Soto received the 2022 Sidnie Manton Award from the British Ecological Society.

    Their paper, "A methodological roadmap to quantify animal-vectored spatial ecosystem subsidies," addresses the growing understanding of how animals exert strong influences on ecosystems and connect ecosystems by acting as spatial nutrient vectors. "To help guide ecologists," said Ferraro, "we developed a roadmap, demonstrating how to integrate the various necessary disciplines to conduct robust research to understand, quantify, and estimate animal contributions to nutrient cycles."

    Anastas also received the Volvo Environment Prize in 2021.

    Landing Two-Up Feature

    Nulla porro assumenda placeat aspernatur sit ipsa, laborum corrupti consectetur nam dolore quam deleniti, officiis minima quis officia minus ipsum rerum. Laudantium fuga facilis id vel ipsa repudiandae dicta, molestias mollitia quae!
    placeholder

    World-Renowned Faculty

    Lorem ipsum dolor sit amet consectetur.

    placeholder

    Professional and Clinical Training

    Magnam, provident repellat earum ex consequatur pariatur fugit, asperiores unde dolores praesentium doloribus natus perferendis, aspernatur quis nisi mollitia ipsam illum similique.

    Description of image
    Stat Feature

    500+ Alumni

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.
    Explore MF Careers

    Program Timeline


    Summer Semesters

    placeholder

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Learn technical and management skills

    An in-between option. Usually used for mid-length text when some formatting (bold, italic, underline, links, bullets, numbered list, etc.) could be needed.

    • Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
    • Magna Risus Ligula Sit Etiam
    1. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    2. Adipiscing Consectetur Mollis
    Styles Dropdown is allowed

    Vestibulum id ligulaAenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Winter Semesters

    placeholder

    Learn technical and management skills

    An in-between option. Usually used for mid-length text when some formatting (bold, italic, underline, links, bullets, numbered list, etc.) could be needed.

    • Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
    • Magna Risus Ligula Sit Etiam
    1. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    2. Adipiscing Consectetur Mollis
    Styles Dropdown is allowed

    Vestibulum id ligulaAenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


    Why YSE Two-Up Feature?

    placeholder

    World-Renowned Faculty

    Lorem ipsum dolor sit amet consectetur.

    placeholder

    Professional and Clinical Training

    Magnam, provident repellat earum ex consequatur pariatur fugit, asperiores unde dolores praesentium doloribus natus perferendis, aspernatur quis nisi mollitia ipsam illum similique.

    Three Up Slider Using Card Slider and Callout Card

    #
    Ipsum Ridiculus Commodo

    Maximum Callout Card Pharetra Commodo

    Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    #

    Fusce Condimentum Pharetra

    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.

    #
    Callout Card

    Parturient Mollis Ligula

    Focusing on developing natural solutions for reducing atmospheric carbon

    Min Card

    #
    Ipsum Ridiculus Commodo

    Maximum Callout Card Pharetra Commodo

    Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    Incidunt aliquid sunt odio id nam deserunt. Illum repellat incidunt nostrum aspernatur, numquam enim, fugit necessitatibus assumenda odio non eaque? Necessitatibus possimus impedit placeat consequuntur autem blanditiis iure magni numquam debitis. Optio possimus cum necessitatibus ut nihil nesciunt saepe libero, perspiciatis sunt, perferendis beatae ipsum, corrupti officiis! Eius, corporis. Dolor, ipsam nam.

    H2 Heading Text

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem2 ipsum dolorfootnote sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Longpersonfirstname Longpersonlastname

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.

    H3 Heading Text

    Blockquote text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • Lorem ipsum dolor scelerisque nisl consectetur et.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. scelerisque nisl consectetur et.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • Lorem ipsum dolor scelerisque nisl consectetur et.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. scelerisque nisl consectetur et.
    Country Capital Language Spoken GDP
    Austria Vienna German $386.4 Billion USD
    Morocco Rabat Arabic $2,832.43 Billion USD
    El Salvador San Salvador Spanish $4,223,58 Billion USD
    Japan Tokyo Japanese $4.939 Trillion USD

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ea quod voluptatibus praesentium voluptatum obcaecati natus, modi ex sunt cumque similique quia saepe maxime iure vitae? Quisquam, voluptates, fugit quae ullam consequuntur nesciunt provident doloremque officiis nostrum itaque possimus voluptatem.

    placeholder
    Caption Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    Minus, necessitatibus! Est veniam, natus deleniti nobis quaerat nostrum dolorem? Blanditiis odio corrupti molestiae accusantium placeat sunt, quo repudiandae dolore animi! Odio suscipit accusantium et, sed repellat nisi error voluptatum vitae maxime qui officiis maiores dicta dignissimos repellendus quas eum?

    Button Default

    Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Aenean eu leo quam.

    Amet consectetur adipisicing elit. Neque cum nihil corporis quisquam nobis sed. Optio praesentium eum culpa magnam neque numquam nulla eius explicabo magni?

    Focus on News

    #
    Faculty

    Turning Wood Into Plastic

    A research team, led by YSE professor Yuan Yao and Liangbing Hu from the University of Maryland, has created a high-quality bioplastic from wood byproducts that they hope can address one of the world’s most pressing environmental issues.

    Read This Story

    Max Card Slider

    Max optional subheading Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla.

    Max Pellentesque Purus Parturient Aenean

    10,000

    Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    Ligula Dapibus Venenatis Inceptos Condimentum Mollis Cras Dolor Consectetur

    Longpersonfirstname Longpersonlastname

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.

    #
    Ipsum Ridiculus Commodo

    Maximum Callout Card Pharetra Commodo

    Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    #
    Centers & Programs

    Maximum Centers & Programs Card

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    Checkerboard Title

    Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.

    Optional Button
    Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Video Checkerboard

    Video checkerboard description. Cras mattis consectetur purus sit amet fermentum.

    Checkerboard Image Mattis Inceptos Malesuada Dapibus
    Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Mattis Inceptos Malesuada Dapibus

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    #

    Max Learning Community Component

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Optional Button

    Masters Program Comparison

    Master of Forestry (MF)

    Focus

    Lorem Ipsum
    Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

    Outcomes

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    More Information

    Master of Environmental Management (MEM)

    Focus

    Gaining an in-depth understanding of one area — a specialization — while also offering the flexibility to explore other disciplines and subject areas.

    Outcomes

    Graduates of the program are next-generation leaders, working across disciplines and sectors to tackle the world’s most pressing environmental challenges.

    More Information

    Master of Forest Science (MFS)

    Focus

    An simple option. Usually used for short text when some formatting (bold, italic, and links) could be needed. Vestibulum id ligula Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Outcomes

    Nisl nunc mi ipsum faucibus vitae aliquet. Mauris a diam maecenas sed enim ut. In nibh mauris cursus mattis.

    More Information

    Master of Environmental Science (MESc)

    Focus

    Lorem Ipsum
    Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

    Outcomes

    Nisl nunc mi ipsum faucibus vitae aliquet. Mauris a diam maecenas sed enim ut. In nibh mauris cursus mattis.

    More Information


    More in Master of Forestry - MF

    • Lorem ipsum

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dolorum, dolores quas temporibus nisi fugiat nobis odit et aut possimus.

    • Architecto harum

      Aspernatur, alias inventore quam est enim molestias tenetur veniam voluptatem nostrum laudantium iste nulla voluptates quidem nisi quibusdam, officiis omnis.

    • Laudantium nesciunt

      Deleniti pariatur et recusandae dolorem aut saepe ratione reprehenderit ipsum consequuntur! Eaque animi corrupti provident eligendi architecto perferendis alias reiciendis.

    • Sequi ea

      Assumenda quibusdam aliquam quod itaque, nihil earum facilis quos quas ratione fugiat aliquid. Deleniti eum nihil dolor atque nulla nesciunt!

    • Recusandae ipsa

      Magni ea perspiciatis veniam corporis omnis. Id accusamus voluptatibus, reiciendis eos laudantium ipsum eveniet officiis fugit placeat et tenetur. Quam?