Flex theme pattern library

The specialized Flex pattern library

This collection of components represents the Northeastern branded design patterns available for you to rapidly create websites.


Headers

Hero

Join a High-Performing Team at the Forefront of Digital and Global Transformation

Page Banner

Consectetur Commodo Purus Vestibulum

Page Section – On Page Banner

Training Opportunities

Never stop learning by leveraging Northeastern supported training opportunities.

Page Section – On Page Banner – CTA

Research

Global challenges are best solved in a barrier-free learning environment, where digital collaboration fuels innovation between disciplines, universities, and industry.


Columns

Quotes

Engagement and Experience

“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.”

Mary Doe

AssocVP

Page Section – 3 Circle – Media – CTA

In each circle add a photo that represents the information described by the text of each category.

Faculty

Key technology resources for teaching and collaborating across the university.

Students

Take your academic experience to new heights with these key technology resources.

Staff

Increase productivity and facilitate collaboration with these key technology resources.

Page Section – Intro – 2×2 grid – Media

Another section to promote your work and ideas

Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.

Library Study Spaces

Is open for studying and offers different types of workstations and rooms.  

Registrar-Managed Classrooms 

Request the use of an academic classroom managed by the Registrar. Faculty and staff may do so at while student groups can request a classroom. 

Center for Student Involvement 

Across the Boston campus may be booked by students, faculty, or staff online or direct through the appropriate offices. 

External Events and Conference Programs 

Available to those outside the Northeastern community.

Page Section – 2 column- Media- Short Content

Header: Highlight a topic with an image 

Body: Provide a brief description of what the viewer should know about the topic you are showing in this block 

Print your documents

Students have access to general-use printers in several campus locations. PaperCut is the software that allows students to release printed materials at any of these locations.

Page Section – 2 column- Media- Long Content

Section Header: Highlight a topic with an image 

Header: Label the section succinctly and create it as a link

Body: Use each section of this block to share different areas of the topic that should be highlighted in depth.  

Teaching and Research

Canvas

The Canvas learning management system is mobile-first, reliable, accessible, and delivers highly customizable and experiential teaching and learning environment. Elevate the learning experience with Canvas support and resources including training, term checklists, and personalized consulting.

Research Computing

High-end computing solutions and comprehensive support are available to help bring faculty research to light, no matter what your discipline. The university partners with the Massachusetts Green High Performance Computing Center in Holyoke, MA to provide high-speed and high-performance resources.

NUflex

NUflex classroom technology is a web-conferencing system that supports teaching and learning, and provides digital flexibility for both instructors and students through cameras, microphones, computers, a projection system, and integrated software. 


Text

Page Section – Title 2 column

Section header with a pithy title

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.

Page Section – Title Lead intro

What learners need today is connection.

This means removing physical, geographic, and cultural boundaries to enable global collaboration rooted in shared meaning. It’s why Northeastern is transforming tech-driven teaching, learning, and research, creating a world that’s always innovating.

“The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.” — Paul Rand, graphic designer

Page Section – Overlay Card Block (experts only)

These two cards should only be used in conjunction with either the Page Section – On Page Banner –CTA  OR Page Section – On Page Banner. The top margin is formatted as a negative value which allows the cards to overlay the banner, if the cards are used without the banner, they will affect the block above them.  The minimum number of cards for this block is 1, and the maximum is 4. 

NUwave

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

Remote Access – GlobalProtect

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

Page Section – 3 column- Card Block (experts only)

These three cards should only be used in conjunction with either the Page Section – On Page Banner –CTA  OR Page Section – On Page Banner.  The top margin is formatted as a negative value which allows the cards to overlay the banner, if the cards are used without the banner, they will affect the block above them.  The minimum number of cards for this block is 1, and the maximum is 4. 

Technology Training   

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

LinkedIn Learning 

consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

Gartner IT 

consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

Page Section – 4×4 grid -Content

Accounts and Access

Your online account

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.

2FA and your account

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.

Appropriate Use Policy

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.

Get Secure

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.


Special features

The two following content blocks are created by combining an on page header with one of two card blocks.

Page Section – On Page Banner combined with Page Section – Overlay Card Block (experts only)

Training Opportunities

Never stop learning by leveraging Northeastern supported training opportunities.

NUwave

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

Remote Access – GlobalProtect

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

Page Section – On Page Banner – CTA combined with Page Section – Overlay Card Block (experts only)

Research

Global challenges are best solved in a barrier-free learning environment, where digital collaboration fuels innovation between disciplines, universities, and industry.

Technology Training   

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

LinkedIn Learning 

consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

Gartner IT 

consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

Getting Started! 5
Welcome to the brand new Edublogs Campus network! To get started, click …
Getting Started! 4
Welcome to the brand new Edublogs Campus network! To get started, click …
Getting Started! 3
Welcome to the brand new Edublogs Campus network! To get started, click …
Getting Started! 2
Welcome to the brand new Edublogs Campus network! To get started, click …
Student Portfolio
Welcome to the brand new Edublogs Campus network! To get started, click …