Basic Page Example 3
Here's our third and final example of a basic page. On this page you'll find the following paragraphs:
![a flat illustration of a woman holding up a comment card in front of a phone](/sites/default/files/styles/embed/public/2023-01/undraw_Share_opinion_re_4qk7.png?itok=5c85K6dP)
- Accordion
- Which uses the nested Accordion Item paragraph
- Fifty-fifty
- Promo Box
- Embed View
- Media Grid
Example Section 1
This section will use a couple of accordions to display other paragraph types.
![SLAC Lab at Sundown](/sites/default/files/styles/centered/public/2023-01/slac-01.jpg?itok=CkflPStL)
Here's the first "Fifty Fifty" paragraph, outside of an accordion. This paragraph supports the following paragraph types as sub-content:
- Image Embed
- Quote
- Video Lightbox
- WYSIWYG
You can combine those 4 paragraphs in any pairing. Find examples of that in the following accordion drawers.
Accordion with Fifty Fifty examples
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.
Cras ornare arcu dui vivamus arcu felis. Aliquet enim tortor at auctor urna nunc id. Facilisi nullam vehicula ipsum a arcu. Praesent semper feugiat nibh sed pulvinar. Lectus arcu bibendum at varius vel. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Blandit volutpat maecenas volutpat blandit aliquam etiam. Tempor orci eu lobortis elementum nibh tellus molestie nunc non. Malesuada bibendum arcu vitae elementum curabitur. Tortor posuere ac ut consequat semper. Et malesuada fames ac turpis egestas sed tempus urna.
Role of the quoted personCras ornare arcu dui vivamus arcu felis. Aliquet enim tortor at auctor urna nunc id. Facilisi nullam vehicula ipsum a arcu. Praesent semper feugiat nibh sed pulvinar.
![]()
![Aerial View of SLAC and Surrounding Area](/sites/default/files/styles/centered/public/2023-01/52477592809_33e7cc952c_z.jpg?itok=XJD9i868)
This WYSIWYG paragraph is just a quick addition to demonstrate that you can have more than one paragraph within an accordion item.
![SLAC techs in protective dress.](/sites/default/files/styles/centered/public/2023-01/52151731466_056bfc760e_k.jpg?itok=LMqSn-Z-)
![Two people with goggles in a lab.](/sites/default/files/styles/centered/public/2023-01/34732645204_72c96f77ce_k.jpg?itok=yeBsbU9V)
Et odio pellentesque diam volutpat commodo. Scelerisque purus semper eget duis at. Suspendisse sed nisi lacus sed. Ac turpis egestas integer eget aliquet nibh. Condimentum vitae sapien pellentesque habitant. Elementum eu facilisis sed odio morbi quis commodo.
![](/sites/default/files/styles/centered/public/oembed_thumbnails/2023-02/O5WHHdF77o8q3GySLD-aAeGqGEUnbtn5CtqVbgv04DQ.jpg?itok=ypnsiJ0T)
About SLAC
Placeholder video or image caption followed by credit. Click on the video icon will open a lightbox to show video in place.
Firstname Lastname/SLAC National Accelerator Laboratory
Example Section 2
Call Out Box
Et odio pellentesque diam volutpat commodo. Scelerisque purus semper eget duis at. Suspendisse sed nisi lacus sed. Ac turpis egestas integer eget aliquet nibh. Condimentum vitae sapien pellentesque habitant. Elementum eu facilisis sed odio morbi quis commodo.
![SLAC Aerial Photo](/sites/default/files/styles/scale_large/public/2023-01/about_SLAC.jpg?itok=nEG5iLs0)
This is just a WYSIWYG paragraph that's going to add some body to this section. In order for the Sidebar Callout to function as expected it should be used next to a section.
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.
Et odio pellentesque diam volutpat commodo. Scelerisque purus semper eget duis at. Suspendisse sed nisi lacus sed. Ac turpis egestas integer eget aliquet nibh. Condimentum vitae sapien pellentesque habitant. Elementum eu facilisis sed odio morbi quis commodo.
![SLAC techs in protective dress.](/sites/default/files/styles/media_grid/public/2023-01/52151731466_056bfc760e_k.jpg?h=a1e1a043&itok=e-Npx8bL)
![Two people with goggles in a lab.](/sites/default/files/styles/media_grid/public/2023-01/34732645204_72c96f77ce_k.jpg?h=f4761ccc&itok=Wubfgia3)
![](/sites/default/files/styles/media_grid/public/oembed_thumbnails/2023-02/O5WHHdF77o8q3GySLD-aAeGqGEUnbtn5CtqVbgv04DQ.jpg?h=144d094f&itok=XNeOTwKs)
About SLAC
Placeholder video or image caption followed by credit. Click on the video icon will open a lightbox to show video in place.
Firstname Lastname/SLAC National Accelerator Laboratory
![One person wearing goggles in a lab with much assorted equipment.](/sites/default/files/styles/media_grid/public/2023-01/35805382933_fabd538652_k.jpg?h=a1e1a043&itok=8holiflf)
![SLAC Aerial Photo](/sites/default/files/styles/media_grid/public/2023-01/SLAC_aerial-1.png?h=69f2b9d0&itok=J13Ewtau)
![SLAC Aerial Photo](/sites/default/files/styles/media_grid/public/2023-01/SLAC%20Aerial%20Photo.jpg?h=252f27fa&itok=Mtnht2K4)
![SLAC Group Photo](/sites/default/files/styles/media_grid/public/2023-01/2022_1207_Drone_Quad_Lab_Wide_Group_Photo_Bonin_DJI_0103%20%280-03-45-00%29.jpg?h=c66d06c9&itok=gwKaFrS2)
![Exterior of SLAC Building](/sites/default/files/styles/media_grid/public/2023-01/2-SLAC_Exterior-GALLERY.jpg?h=14f142cc&itok=xrEiweon)