Examples of different elements used on the DESE website.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards support a wide variety of content, including images, text, list groups, links, and more.
Mix and match multiple content types to create the card you need. Shown below are image styles, text styles, and links in a responsive-width card. The recomended length for the text pharagraph description on the card is up to 3 sentences.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Link as a button
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Text link
The horizontal card takes the full width of the parent container and the length of the content. Mix and match multiple content types to create the card you need.
Bold text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
Summary description: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Media Block takes the full width of the parent container and it has a fixed height. The content in the media block consist of the image icon and the title.
Title Description
Accordions can simplify long content pages and minimize scrolling, they hide content visibility and increase interaction. Use accordions for FAQ or content-heavy pages.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
Blockquote display examples — with and without image. Image size is 200 x 200 px.
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies " — Author Name
Blockquotes With Image
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa" Author Name
Last Updated: January 30, 2024
Massachusetts Department of Elementary and Secondary Education 135 Santilli Highway, Everett, MA 02149
Voice: (781) 338-3000 TTY: (800) 439-2370
Disclaimer: A reference in this website to any specific commercial products, processes, or services, or the use of any trade, firm, or corporation name is for the information and convenience of the public and does not constitute endorsement or recommendation by the Massachusetts Department of Elementary and Secondary Education.