Commonly Used Components / Paragraph Types
- Karen Eborall
Accordion
Used to organize a page when there are multiple, text-heavy topics to cover. Most commonly seen on:
FAQs
Consortia Diseases Studied pages
Prior Publications
Tips
Be sure to open the “Heading” tab and select the desired heading level
If you do not want the first accordion in a series to be open upon page load, add an empty accordion item to the top.
View this component in action on the RDCRN What are Rare Diseases? page.
Blocks and Views
Both of these can be very confusing and too complicated to explain easily in this guide. Please reach out to the DMCC website team for assistance with either of these components. The exception would be making updates to detailed study blocks (explained above) and adding a new detailed study block (also explained above).
Container
Placing components/content inside of a container guarantees that a margin will be added to the left and right sides of the content. It is often used for Image Left Text Right, Image Right Text Left, Video Left Text Right, and Accordions.
You must select a Container Type after inserting the component or the correct CSS will not be applied.
Consortium sites feature three container types:
Container Fluid
Container - Most commonly used
Card Container - Best for use on Meet Our Team pages, or anywhere else multiple cards will be displayed.
Heading
Insert a heading from levels H1* through H5. *H1 is commonly used to insert the page title at the top of all content. Keep in mind, this component will always display the title centered. If you wish to insert a heading with a left or right alignment, use Simple Text.
Please always consider accessibility and search engine optimization rules when inserting headings. The purpose of heading levels is to organize content, not apply stylistic choices such as font size or color. You cannot skip a heading level, e.g. H2 followed by H4. It is acceptable to do the following:
H1
H2
H2
H3
H4
H2
H3
Image Left Text Right
Used when you want text to appear alongside an image. The image displays to the left and a heading (optional), descriptive text, and button (optional) to link to any webpage, internal or external, are displayed to the right. View this component in action on the RDCRN Our Network page.
Image Right Text Left
Used when you want text to appear alongside an image. The image displays to the right and a heading (optional), descriptive text, and button (optional) to link to any webpage, internal or external, are displayed to the left. Most commonly used in conjunction with Image left text right to create a staggered look, seen here on the Network website. View this component in action on the RDCRN Our Network page.
Resource Accordion
Resource accordions can house all of the above components. They are most commonly used on the Resources for Patients & Families and Resources for Researchers & Clinicians pages to organize multiple pieces of related content. View this component in action on the RDCRN Resources for Researchers & Clinicians page.
Video Left Text Right
Used when you want text to appear alongside a video. The video displays to the left and a heading (optional), descriptive text, and button to link to watch the video on its native platform (optional) are displayed to the right.
View this component inside of Resource Accordions on the RDCRN Resources for Researchers & Clinicians page.
Cards
Team Card
Commonly used on consortium site Meet Our Team pages (see CEGIR for example), but can be utilized any time you want a card with an image at the top, text in the middle, and a CTA button on the bottom.
Select the Container component first, select “Card Container” from the Container Type dropdown menu
Insert a General Card and select “Team Card*” from the Card Type dropdown menu.
General Cards also have a “Columns” dropdown menu. Select the desired width based on the number of cards you would like to appear in each row.
*The Team Card image style is managed in Configuration > Media > Image styles > Team Member </admin/config/media/image-styles/manage/team_member>. “Scale and Crop” prevents the image from being stretched or squished if it does not perfectly fit the specified width and height.
View this component inside of Resource Accordions on the FCDGC Meet Our Team page.
General Card
Used to create a card with a heading that features a background color for emphasis, followed by an optional image (you can skip this is you only want text in the card), then body text against a white/neutral background, and finally, a CTA button. See “Team Card” instructions above, but select “General Card” from the Card Type dropdown menu instead.
Card with Shadow
Similar in design to the General Card, but adds a white border around the colored heading and adds a shadow to the perimeter of the card, making it look more like the news cards displayed on each website’s homepage.
HTML
Source Code
To avoid adding unwanted design elements to content that is copied and pasted, toggle to the source code to paste in content or clean the content first by pasting it into a plain text document (Note Pad or Text Edit), then pasting the cleaned content into Drupal.
Sometimes content edited in rich text can wind up with spacer HTML inserted in place of a traditional space. If this happens enough, it can ruin the way content is displayed on page, especially when a browsers window is made smaller. You can replace this code with a space when it is between words.
Add Space Before/After a Paragraph
To add space before, after, or to the side of a paragraph, use HTML as follows.
<p style=”margin-bottom: 5%;”>
<p style=”margin-top: 5%;”>
<p style=”margin-right: 5%;”>
<p style=”margin-left: 5%;”>
Add Space to the Left of a Bullet or Numbered List
Current CSS does not automatically add a margin (indent) to the left of a bullet or numbered list. To add this, you can use the following HTML:
<ul style="margin-left: 3rem;">
<ol style="margin-left: 3rem;">
NOTE:
You can replace the 5% with any desired number. You can also replace with with code akin to font size, e.g. 3rem.
You can also add this same style code to add space above a line break, e.g. <hr style=”margin-top: 5%;” />
Sample of code in use: <p class="text-align-center" style="margin-bottom: 5%;">The RDCRN’s <a href="/patient-advocacy-groups/cpag">Coalition of Patient Advocacy Groups</a> creates resources for patients and patient advocacy groups to advance the cause of rare disease research and improve patient outcomes throughout the network. To date, they have hosted two webinar series, one on navigating rare disease clinical trials and another featuring a variety of resources related to rare disease advocacy work:</p>
On this page: CPAG Webinars
Tables
Tables generally have a gray background with gray text, which has presented accessibility issues. We should probably ask the dev team to update the CSS, but I’ve found adding this code to its own Simple Text component on a page with a table does the trick.
<style type="text/css">tbody, td, tfoot, th, thead, tr {
border-width: 1px;
}
table {
border: 1px;
border-color: black;
}
tr td, tr th {
border: 1px solid #000000;
}
tr {
background: #ffffff;
}
</style>
API Content
Adding Study Detail Pages
Study detail URLs are automatically created on the related consortium site when a study is created and marked “Active” in Django.
All information featured in the right column on the page is populated via API and must be updated in Django.
To add study detail information (HTML) text to the left-side of the page, you must do the following:
Go to Structure > Block layout > Add custom block
Create a Research Study Details block </block/add/research_study_details>
Insert the protocol number in the title (this will make your life easier later)
Enter all study detail text and format as required. Please make sure to implement headings in an accessible manner (in order, no skipping levels).
Should you need to edit this block, you can find it here Structure > Block layout > Custom block library </admin/structure/block/block-content>
Save the new block, then navigate to Structure > Block layout > Custom block library </admin/structure/block>
Scroll to the Research Study Detail section and click “Place Block”
Search for your block name and click the “Place Block” button
Click the “Configure” button
Make sure to deselect the “Display title” box
Under “Visibility,” select “Page” and enter the path alias for the related study detail page, e.g. /research-study/7701 (do not use the full website address). If you skip this step the newly created study detail page will populate onto every detailed study page.
Click the “Save” button. Your Study Detail text will not appear on the left side of the Study Detail page.