Browse by Clinic
Become a Member
Element Examples - PLEASE DO NOT EDIT
Section (aka Headline -- this is a 1st-level heading; also used for page headers)
Text after a Section Headline. This is rich text (see Rich Text examples).
Sub-Section (aka Subheading -- this is a 2nd-level heading)
Text after a Sub-Section Subheading. This is rich text (see Rich Text examples).
Rich Text
Here are some examples of rich text, which allows various formatting options:
Regular text.
Bold text.
Italic text.
Underlined text.
Strikethrough text.
The following are examples of rich text numbered lists and bullet lists.
RICH TEXT NUMBERED LIST
The following is a numbered list:
- Item #1
- Item #2
- Item #3
NOTE: There is no extra space after the numbered items in a numbered list, before the next section of text starts.
RICH TEXT BULLET LIST
The following is a bullet list: (NOTE: There is an extra space after this line, unlike in the numbered list.)
- First bullet item
- Second bullet item
- Third bullet item
NOTE: There IS extra space after the bulleted items in a bullet list, before the next section of text starts.
Linked text.
Timeline
February: NPR
January: PBS
March: NBC
It's Time to End Sperm Donor Anonymity
The article description goes here.
March: PBS
Article title
Description of article.
Hotlinkable Title
Hotlinkable Subtitle
Rich text field for adding a longer description. Allows multiple paragraphs.
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.
Rich text field for adding a longer description.
Hotlinkable Title
Hotlinkable Subtitle
Rich text field for adding a longer description. Allows multiple paragraphs.
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.
Unnumbered List
First item in an unnumbered list. This is a rich text field, with options for bold, italic, and hotlinks.
You can also include line breaks, to create multiple paragraphs.
Would prefer the bullets to be solid and round, more like this size: O
Second item in an unnumbered list. This is a rich text field, with options for bold, italic, and hotlinks.
You can also include line breaks, to create multiple paragraphs.
Would prefer the bullets to be solid and round, more like this size: O
List (a numbered list)
First item in a numbered list. This text is hotlinkable (but turns pink if linked).
List item description text. This is a plain text field (no formatting options).
Second item in a numbered list. This text is hotlinkable.
List item description text. This is a plain text field (no formatting options).
Third item in a numbered list. This text is hotlinkable.
List item description text. This is a plain text field (no formatting options).
Picture Elements (examples)
Full Picture
Full Picture element adds a centered image at the original size (NOT sizeable within the CMS; must resize before uploading).
Options include:
1. Cropping (aka “Edit picturemask”) [NOTE that this feature does not seem to work (doesn’t crop when you click Apply/Save). Also, if cropping only works in the Full Picture Crop element, why does THIS element even exist?]
2. Hotlinking
3. Edit Image Properties
- Caption: Displays under the image, flush left (can't center)
- Title [Works, but I’m not sure what it’s for; show's up if you hover over the image -- isn’t that what alt text is?]
- Alternative Text [Not sure if it works; doesn’t display anywhere]
- Style (adding a border) [Doesn’t work if you also include a caption]
4. Text (rich text; immediately follows the image)
This is text under a Full Picture.
Full Picture Crop
Full Picture Crop element is exactly the same as Full Picture, except the cropping option actually works. [Why does Full Picture even exist?]
[Full Picture Crop element has the same issues with Edit Image Properties as Full Picture does.]
This is text under Full Picture Crop.
Left Picture
Left Picture element adds a left-aligned image at the original size (NOT sizeable within the CMS; must resize before uploading). Same options as Full Picture. [Same issues as Full Picture: cropping, Edit Image Properties]
This is text under a Left Picture.
Left Picture Crop
Same as Full Picture Crop, but left-aligned. [Same issues with Edit Image Properties as Full Picture Crop]
This is text under Left Picture Crop.
Right Picture
Same as Full Picture and Left Picture, but right-aligned. The cropping option DOES work in this element. [Same issues as above with Edit Image Properties]
Row (of pictures)
The Row element allows you to place pictures side by side (in a row).
[Cropping functionality doesn’t work]
[Caption and Border don’t work together]
[Sizing functionality needs a locked aspect ratio]
[The Row element currently stretche's all pictures to the same height]
Testimonials
Sample testimonial text.
- Wendy Kramer, DSR Director
Accordion
Sample answer #1.
Sample answer #2.
This is a rich text field.
- Wendy Kramer [needs default punctuation here] DSR Director -
Big List
Big List is like at the bottom of the Medical Issues page. Each column AND each entry is a separate element, so this type of list is not easily editable. Avoid using!
Buy Barnes and Noble
A button that you can hotlink to a B&N product:
Buy Amazon
A button that you can hotlink to an Amazon product:
Pink Button
Hotlinked button that expands to accommodate the text you enter.
Card List (and Cards)
Here are some examples of how the Card List/Card element could be used.
Where does the "Card List Title" appear? (See the element that immediately follows this one in the right rail; it isn't displaying anywhere on the page.)
"Name" field
"Description" field
[pink text but must be hotlinked with a URL or a "mailto:" tag]
Contact Card
"Name" field
"Position" field
Button is called "Download" by default.
"Name" field
"Position" field
Button seems to center under the text above it (not centered in the box).
Ryan Kramer
DSR Co-Founder and Vice-Chair / Program Manager at Google Life Sciences (Verily)
Ryan Kramer, a donor-conceived person, continues to co-manage the DSR with his mother Wendy. Ryan graduated high school at age 14, received an undergraduate degree in Aerospace Engineering at age 18, and a Master's in Engineering Management at 19. He has worked at NASA's Jet Propulsion Laboratory, Apple, and currently works at Google's Life Sciences company, Verily. Ryan has 19 known half-siblings — so far.
Sell Book Card
Sell Book Card Headline
Sell book card body text, with picture.
Positioned Content
[Not sure what this element is; need clarification. Seems to be a way to insert a picture either flush left or flush right, with padding along the top margin(??) -- but no padding along the sides(??). This element seems to be a one-off and/or misnamed. It also has all the same issues as the other Picture elements (See earlier notes and questions about Picture elements and Row pictures.)]
Audio
The "Audio #" element does NOT display anything.
Here's a link to the audio file.
Video
The "Video #" element displays the uploaded video.
Here's an external link to the video file.