Paragraph Type Examples

Here are examples of all the custom paragraph types we have created so far. These are only available on the alumni site for now, but will be expanded to all other DAR sites.

Paragraph Type- BODY

Content area: 1380px max width

Description: This paragraph type provides a single field for content (copy and images) that uses the standard Drupal WYSIWYG.

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. 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. 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. 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.

Paragraph Type- PARAGRAPH W/ BLUE BG

Content area: 1200px wide (bg is full width)

Description: This paragraph type provides a single field for content (copy and images) that uses the standard Drupal WYSIWYG. Content is black text on a light blue background. All h2 tags are centered.

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. 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. 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. 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.

Paragraph Type- CALLOUT

Content area: 1000px max width (bg is full width)

Description: This paragraph type provides a single field for content (copy and images) that uses the standard Drupal WYSIWYG. Content is white text on a blue gradient background. All text is centered.

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. 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. 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. 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.

Paragraph Type- TWO COLUMN W/ BLUE BG

Content area: 2 columns that take up 45% of the screen width each up to a combined width of 1380px (bg is full width)

Images: 700px max width

Description: This paragraph type provides a two fields for content (copy and images) and each one uses the standard Drupal WYSIWYG. Content is centered dark blue text on a light blue background.

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. 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. 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. 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.

placeholder

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.

Paragraph Type- PARAGRAPH W/ DARK BLUE BG

Content area: 1200px wide (bg is full width)

Description: This paragraph type provides a single field for content (copy and images) that uses the standard Drupal WYSIWYG. Content is white text on a dark blue background. All h2 tags are centered.

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. 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. 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. 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.

Paragraph Type- TWO COLUMN TABBED CONTENT

Content area: Two columns that will take up a combined width of 1380px

Description: This paragraph type provides a field for a title and as many fields for images as necessary. Each image also requires the fields for Image Alternative Text as well as Image Title to be completed. The Alternative Text entries will appear on the left side of the page and the image will appear on the right side with the Image Title appearing as a caption underneath it. Only one image is displayed at a time and users may switch between images by clicking on the Alternative Text labels in the left column.

Tabbed Content example
Alt Text 1
Alt Text 2
Alt Text 3

placeholder

Paragraph Type- TWO COLUMN PARAGRAPH

Content area: 2 columns that take up 45% of the screen width each up to a combined width of 1380px

Images: 700px max width

Description: This paragraph type provides a two fields for content (copy and images) and each one uses the standard Drupal WYSIWYG.

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. 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. 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. 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.

Paragraph Type- FORMATTED CONTENT w/ PARALLAX BG

Content area: 1000px max width

Image: At least 1920px wide

Description: This paragraph type provides a field for content (copy and images) that uses the standard Drupal WYSIWYG and an image field. The image has a blue filter applied to it and is used as a parallax background. The content is white text and also supports images.

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. 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. 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. 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.

Background Image
Machinery
/sites/g/files/bxs3301/files/2023-07/Working%20to%20create%20a%20zero-emissions%20future%20at%20Rice%20University.mp4

Paragraph Type- VIDEO BG w/ OVERLAY

Content area: The copy appears in a shadow box that is 600px wide. The background video takes up the full width of the screen.

Description: This paragraph type provides a field for content (copy and images) that uses the standard Drupal WYSIWYG and an video field. The content originates in the upper left portion of the section in a 600px wide shadow box; copy is white text. The video must be .mp4 or webm and will automatically play and loop with no sound when the page is loaded. No video controls are available for the user.

test

Paragraph Type - PRIORITY

Description: A Campaign Priority Intro paragraph (see above) should be included before any Campaign Priority paragraphs (what you're looking at right now) and should NEVER be altered unless specifically requested. The Campaign Priority paragraphs have an image field and a field for content that uses the standard Drupal WYSIWYG. The image should be 900x600 and will appear on the left side of the page. A "swipe" animation is automatically applied to the image. The content area will appear on the right side of the page and should have the following elements: a title (h3 tag), a description (p tag), the Opportunities header (h4 tag) and a table that contains the opportunities specific to this priority. The table will be hidden until the user clicks on the Opportunities header.

Opportunities to be bold together

Endowed professorships

Fund transformational faculty who will improve our understanding of Earth’s evolution through time and of the complex relationships between natural resources and living organisms that create dynamic ecosystems, which is essential for design of long-lasting solutions to environmental challenges.

Symposia and visitors

Establish an Environment and Sustainability symposium series and visitors program to attract renowned researchers and visitors to Rice while establishing the Wiess School as a national hub for environmental sciences.

Research seed grants

Support fundamental research that will help address challenges associated with ecology, bio-diversity, energy transitions, natural resource management, climate, and natural hazards.

Graduate and postdoctoral fellowships

Establish an Environment and Sustainability Fellows program to train future leaders in the interdisciplinary study and stewardship of the environment, expand our research impact and support the reputation and visibility of our programs.

Paragraph Type- TWO COL DESCRIPTION AND IMAGE and CAROUSEL CONTROLS

Content area: The copy fills the left half of the page while the image fills the right half. Combined they take up the full width of the page.

Description: This paragraph type provides a field for content (copy and images) that uses the standard Drupal WYSIWYG and an image field. The main content appears on the left half of the page and the image takes up the right half. If the Carousel Controls paragraph type is added underneath a series of Two Col Description and Image paragraphs then it will combine all paragraphs of this type as as a carousel. The Carousel Controls paragraph should NEVER be altered.

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. 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. 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. 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.

test

Paragraph Type- TWO COL DESCRIPTION AND IMAGE and CAROUSEL CONTROLS

Content area: The copy fills the left half of the page while the image fills the right half. Combined they take up the full width of the page.

Description: This paragraph type provides a field for content (copy and images) that uses the standard Drupal WYSIWYG and an image field. The main content appears on the left half of the page and the image takes up the right half. If the Carousel Controls paragraph type is added underneath a series of Two Col Description and Image paragraphs then it will combine all paragraphs of this type as as a carousel. The Carousel Controls paragraph should NEVER be altered.

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. 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. 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. 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.

test

Paragraph Type- COMMUNICATIONS PREFERENCES

Content area: Full width of the screen with a dark blue background. A call to action is in the center with a button directly below it that links to a Communications Preferences page on the Rice Portal.

Description: This paragraph type provides a field for the CTA which should be no longer than 5-8 words. You are also able to specify a URL and text for the button.

Want to stay connected to GROUPNAME?

Paragraph Type- PREVIEW GRID

Content area: Full width of the screen is divided into three columns. Each column contains an image and a title with a description appearing when a user hovers over the image.

Description: This paragraph type provides a field for the title, image (700x550), and summary to be used in each column. If a link appears within the summary, it will be applied to the image.

aruba test
Association of Rice University Black Alumni

Association of Rice University Black Alumni


The Association of Rice University Black Alumni (ARUBA) seeks to provide opportunities for Rice's Black alumni, students, parents, faculty and staff to strengthen relationships and develop new connections with each other and with the Rice community.

VISIT PAGE

aruba test
Association of Rice University Black Alumni

Association of Rice University Black Alumni


The Association of Rice University Black Alumni (ARUBA) seeks to provide opportunities for Rice's Black alumni, students, parents, faculty and staff to strengthen relationships and develop new connections with each other and with the Rice community.

VISIT PAGE

aruba test
Association of Rice University Black Alumni

Association of Rice University Black Alumni


The Association of Rice University Black Alumni (ARUBA) seeks to provide opportunities for Rice's Black alumni, students, parents, faculty and staff to strengthen relationships and develop new connections with each other and with the Rice community.

VISIT PAGE

Paragraph Type- CALLOUT w/ CUSTOM BG COLOR

Content area: 1000px max width (bg is full width)

Description: This paragraph type provides a single field for content (copy and images) that uses the standard Drupal WYSIWYG. Content colors are chosen by the creator.

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. 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. 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. 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.

placeholder

Paragraph Type- TWO COL W/ CUSTOM COLORS

Content area: 2 columns that take up 45% of the screen width each up to a combined width of 1380px (bg is full width)

Images: 700px max width

Description: This paragraph type provides a two fields for content (copy and images) and each one uses the standard Drupal WYSIWYG. There are also fields to specify the desired background and font colors.

placeholder

Paragraph Type- THREE COL W/ CUSTOM COLORS

Content area: 3 columns that take up 30% of the screen width each up to a combined width of 1380px (bg is full width).

Images: 700px max width

Description: This paragraph type provides a three fields for content (copy and images) and each one uses the standard Drupal WYSIWYG. There are also fields to specify the desired background and font colors.

placeholder

Paragraph Type- DIRECTORY - THREE COL (or FOUR COL)

Content area: 3 (or 4) columns that take up 30% (or 25%) of the screen width each up to a combined width of 1380px.

Images: Should be square; 700px max width

Description: This paragraph type provides a three (or four) fields for Profile information and each one uses the standard Drupal WYSIWYG. There are also three (or four) image fields for photos of the specific staff member.

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Placeholder

First Last
Job Title

713-348-XXXX

email@rice.edu

Background Image
Ivan Rosa de Siqueira

“Every new course represents a new chance of improving ourselves and serving as sources of knowledge and learning for our undergraduate students. I find this truly inspiring and motivating.”

Kathleen Shive Matthews

Kathleen Shive Matthews

For nearly five decades at Rice, Kathleen Shive Matthews has set the highest standard for impactful research, mentorship and inclusive leadership. The Stewart Memorial Professor Emerita of BioSciences has dedicated her career to scientific discovery and expanding opportunities for women and minorities in STEM.

Matthews, who obtained a Bachelor of Science in chemistry from the University of Texas at Austin and her doctorate in biochemistry from the University of California, Berkeley, joined Rice in 1972 as a founding member of the biochemistry department, where she conducted groundbreaking research on protein-DNA interactions underlying gene regulation. Her contribution to the field for more than five decades is noteworthy, as evidenced by her 170-plus publications, her service on numerous scientific committees and boards, and her impressive awards from the National Institute of Health, National Science Foundation, American Society for Biochemistry and Molecular Biology and American Association for the Advancement of Science, to name just a few.

Scott W. Wise ’71

Scott W. Wise ’71

Throughout his decades of service, including as Rice’s former chief investment officer and as alumni trustee, Scott Wise has stewarded the university through a period of transformative growth and impact.

Wise earned his B.A. in economics from Rice in 1971 and a Master in Accounting from The University of Texas in 1973. As a pitcher on the Rice baseball team, Wise was a four-year letterman and co-captain and posted the lowest earned run average in the Southwest Conference in 1970. During his 31-year career at Rice, including over 20 years as vice president for investments and treasurer at Rice, he was responsible for the management and oversight of all investment matters. From 2009-2010, he also served as the founding president of Rice Management Company. By the end of his tenure, Rice’s endowment assets had grown from approximately $1 billion in 1989 to more than $4 billion. In 2010, Wise was recruited by TIAA to become founding President of Covariance Capital, an investment management company for non-profit clients. For the last seven years, Wise has served as CEO and CIO for the Cullen Foundation, which supports health care, educational and civic initiatives in the Houston area, including at Rice.

https://www.flickr.com/photos/ricealumni/albums/72177720308042257/