This page uses the “Default” page template, which is what we typically use for inner pages. This paragraph uses the “Large” font size option. Typically we use this larger font size treatment for a sort of introduction to the page but that is not exclusive. 

The hero image above can either be set to the default for the site (which is hard-coded into the CSS for each theme), individually set, or inherited from the parent page. This page’s hero image has been inherited from its parent page (Web Strategy).

“Default” pages have the option to have a left nav, a right sidebar, or neither. Currently there is no way to include a left nav and a right sidebar on the same page (in progress). This page includes the left nav. This is a regular paragraph using the “Default” font size option. 

Buttons

This is a collection of buttons typically used as calls-to-action.

Jay performing
Jay performing

This is an H2. Above is a section break. 

Section breaks have an option to be small or full width and are available in an array of brand colors. 

These paragraphs wrap around a right aligned, medium image. Images may be aligned left, right, or centered and have three size options; thumbnail, medium, and large. 

Praesent gravida lectus vitae nulla viverra eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque et odio in tortor vulputate porttitor vel eu sapien. Curabitur non consectetur nulla. Mauris consectetur malesuada erat at ultricies. Integer finibus lorem vel ante blandit, sit amet dignissim magna sagittis. Praesent eu metus sem. Aliquam nec interdum lorem. Donec non lorem vitae justo vulputate varius eu in quam. Morbi semper ante commodo magna interdum lacinia. 

This is an H3. Waltz, bad nymph, for quick jigs vex.

This is an H4. Sphinx of black quartz, judge my vow.

This is an H5. How vexingly quick daft zebras jump!
This is an H6. Glib jocks quiz nymph to vex dwarf.

H6 is frequently used as a combination of section break and headline especially in tighter areas like within sidebars or narrow columns in footers.

Quote

I really do hope that someone gives an example of a pull quote so that I know what they’ll look like.

You (likely)

Table

CategoryInformation
Common NameTiger aloe, partridge-breasted aloe, partridge breast aloe
Botanical NameGonialoe variegata (formerly Aloe variegata)
FamilyAsphodelaceae
Plant TypeSucculent, perennial
Mature Size18—24 in. tall, 8–12 in. wide
Sun ExposureFull sun to partial shade
Soil TypeWell drained, sandy loam; cactus/succulent potting mix
Soil pHSlightly acidic (5.5—6.5)
Bloom TimeJuly to September
Flower ColorOrange, salmon, pink, yellow (rare)
Hardiness Zones9–11 (USDA)
Native AreasSouthern Africa and  Namibia

Images

Below is a thumbnail image set to align center. This treatment has been used successfully as a sort of stylized section break as shown here. All center aligned images create a full break between any content before or after them; text will not wrap around them. Image captions will display and are populated by the “caption” option on the image within the media gallery.

Displayed image size depends on the combination of size choice, alignment, and page template. Following is a collection of all possible options for this page template. Images will spread to 100% width when space is limited by the available width of the browser and/or the available width within each page template.

Jay drinking a coffee and taking a selfie with a selfie stick

Large Images

The largest display size we currently have. Typically we use large images in a centered alignment (shown immediately below) because of the limited space left for text to wrap around the image when set to left/right alignment.

JHNeedsU sign in window of FFC
JHNeedsU sign in window of FFC

This image is size large, align left. It leaves room for text to wrap around it only at the largest screen sizes. This is not a typical treatment though it does work well on full width (no left nav, no right sidebar) pages.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, enim id semper scelerisque, magna felis ullamcorper purus, vel dignissim ipsum elit sit amet turpis. Sed faucibus lacus lorem, sit amet laoreet sem elementum vitae. Sed quis nulla commodo, commodo ante ac, vulputate tellus. Nulla in porttitor odio. Nulla pulvinar posuere justo eu semper. Fusce vehicula est a ipsum mattis porta. Cras at magna vulputate, ullamcorper odio in, semper mauris. Integer dapibus nisi quis lorem lacinia elementum. Integer et nulla quis arcu elementum pellentesque vel non libero. Donec sollicitudin felis eget arcu tristique ornare.

Johns Hopkins Congressional Briefing Series
Johns Hopkins Congressional Briefing Series

This image is size large, align right. It leaves room for text to wrap around it only at the largest screen sizes. This is not a typical treatment though it does work well on full width (no left nav, no right sidebar) pages.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, enim id semper scelerisque, magna felis ullamcorper purus, vel dignissim ipsum elit sit amet turpis. Sed faucibus lacus lorem, sit amet laoreet sem elementum vitae. Sed quis nulla commodo, commodo ante ac, vulputate tellus. Nulla in porttitor odio. Nulla pulvinar posuere justo eu semper. Fusce vehicula est a ipsum mattis porta. Cras at magna vulputate, ullamcorper odio in, semper mauris. Integer dapibus nisi quis lorem lacinia elementum. Integer et nulla quis arcu elementum pellentesque vel non libero. Donec sollicitudin felis eget arcu tristique ornare.

Integer elementum nulla quis vulputate consequat. Pellentesque feugiat odio diam, vel pellentesque nibh tristique non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim libero, placerat at dui et, pretium lobortis metus. Aenean vel condimentum orci, sit amet placerat erat. In non ex at erat eleifend placerat eu in lectus. Maecenas viverra turpis ut nunc semper, non suscipit ante ultrices. Aenean ac lacinia ex. Nullam euismod purus nec neque pharetra blandit. Nam dui eros, pretium ac mollis nec, pellentesque vel odio. Aliquam accumsan nisi augue, et varius lorem molestie at. Maecenas vitae eros nec purus blandit tincidunt et sed dui.

Medium Images

Burrito Tape
Burrito Tape

This image is size medium, align left. It leaves plenty of room for text to wrap around it. This is the most used size/placement treatment across our sites.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, enim id semper scelerisque, magna felis ullamcorper purus, vel dignissim ipsum elit sit amet turpis. Sed faucibus lacus lorem, sit amet laoreet sem elementum vitae. Sed quis nulla commodo, commodo ante ac, vulputate tellus. Nulla in porttitor odio. Nulla pulvinar posuere justo eu semper. Fusce vehicula est a ipsum mattis porta. Cras at magna vulputate, ullamcorper odio in, semper mauris. Integer dapibus nisi quis lorem lacinia elementum. Integer et nulla quis arcu elementum pellentesque vel non libero. Donec sollicitudin felis eget arcu tristique ornare.

JHU.edu shown on a laptop screen
JHU.edu shown on a laptop screen

This image is size medium, align right. It leaves plenty of room for text to wrap around it.

Integer elementum nulla quis vulputate consequat. Pellentesque feugiat odio diam, vel pellentesque nibh tristique non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim libero, placerat at dui et, pretium lobortis metus. Aenean vel condimentum orci, sit amet placerat erat. In non ex at erat eleifend placerat eu in lectus. Maecenas viverra turpis ut nunc semper, non suscipit ante ultrices. Aenean ac lacinia ex. Nullam euismod purus nec neque pharetra blandit. Nam dui eros, pretium ac mollis nec, pellentesque vel odio. Aliquam accumsan nisi augue, et varius lorem molestie at. Maecenas vitae eros nec purus blandit tincidunt et sed dui.

Reflection of Gilman tower in MSEL Q-Level door
Reflection of Gilman tower in MSEL Q-Level door

The above image is size medium, align center. As with all centered images it creates a full break between the content before and after it.

Thumbnail Images

Thumbnail images are the smallest size available for our sites. Typically used for added detail or smaller graphics. The first image on this page shows a thumbnail image aligned center, acting as a stylized section break.

Staff work to complete the crossword puzzle developed as this year's thank you message from President Daniels.
Staff work to complete the crossword puzzle developed as this year’s thank you message from President Daniels.

This image is size thumbnail, align left. It leaves the most room for text to wrap around it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, enim id semper scelerisque, magna felis ullamcorper purus, vel dignissim ipsum elit sit amet turpis. Sed faucibus lacus lorem, sit amet laoreet sem elementum vitae. Sed quis nulla commodo, commodo ante ac, vulputate tellus. Nulla in porttitor odio. Nulla pulvinar posuere justo eu semper. Fusce vehicula est a ipsum mattis porta. Cras at magna vulputate, ullamcorper odio in, semper mauris. Integer dapibus nisi quis lorem lacinia elementum. Integer et nulla quis arcu elementum pellentesque vel non libero. Donec sollicitudin felis eget arcu tristique ornare.

Video and Photo team behind the scenes
Video and Photo team behind the scenes

This image is size thumbnail, align right. It leaves the most room for text to wrap around it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, enim id semper scelerisque, magna felis ullamcorper purus, vel dignissim ipsum elit sit amet turpis. Sed faucibus lacus lorem, sit amet laoreet sem elementum vitae. Sed quis nulla commodo, commodo ante ac, vulputate tellus. Nulla in porttitor odio. Nulla pulvinar posuere justo eu semper. Fusce vehicula est a ipsum mattis porta. Cras at magna vulputate, ullamcorper odio in, semper mauris. Integer dapibus nisi quis lorem lacinia elementum. Integer et nulla quis arcu elementum pellentesque vel non libero. Donec sollicitudin felis eget arcu tristique ornare.