Common Section Examples
Light Single Column Section Centered With Image
A very common section used on the Corpsite
Images and Videos are centered and respect page indentation
A very common section used on the Corpsite
The image has no specific behaviors, it will resize on smaller screens
Text links have a default color that you can change in the right panel
If you want the text column to be thinner just add a “Max width” to the Group that contains all the text and set the value you want, then align the content using the Responsive Alignment on the Stack block above the Group
The inverted style of the Light 2-Column Section
Text links have a different default color when the paragraph is white, you can change it in the right panel.
Button Solid with Accent color scheme
Very used on pages that rely more on assets than texts
The image uses the Fullsize Column behavior with a max height value
Since the image in this case reaches the top and bottom edges of the section the text column must have a top and bottom padding applied to its Stack or Group block to compensate for the lack of this spacing on the section’s Group block.
On mobile, the text column must keep the default padding we apply for every section, but the image should reach the edges of the screen. So on the mobile breakpoint, we set padding to 0 on all sides for the section’s Group. For the text column’s Stack or Group block, we add those paddings for the mobile breakpoint, so the text won’t reach the edge of the screen.
Complex Section Examples
Overlapping content
To break the standard layout of the site and create different modern design content we created the OverlapBox block, you can achieve a lot of cool designs like making content overlap images or vice-versa.
2x
Lorem Ipsum
75%
Do reprehenderit exercitation eiusmod Lorem.
45%
Do reprehenderit exercitation eiusmod Lorem.
By using the “absolute” position type on the OverlapBox you can make an image float between contents, the positioning of it is relative to the OverlapBox placement on the page.
Row with a left side Image overlapping right side content. They will stack on mobile
Dark Single Column with Stacked side-by-side Images
Each row has two columns, one with text and the other with image. The Group block that holds the text has vertical padding on the desktop breakpoint to compensate for the overlapping that one row has on the other. The padding value must vary according to the text height as well.
The overlap is created using the Overlap Box block on the image column, this block sets a negative margin to the top that makes the bottom row appear in front of the top one. The higher the negative top margin the higher must the padding on the text groups be to achieve visually pleasant content.
Not commonly used, this kind of section was migrated from the legacy Corpsite.
Custom Section Examples
Here are some examples of what you can create using blocks, the texts and images are just for showcasing these examples.
Lorem Ipsum
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Our History
The idea for JobScore was conceived in 2004 by a veteran technology recruiter and a Stanford educated technologist. We launched in 2006 and have been leveraging technology to help employers get better at hiring ever since.
Lorem Ipsum
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Background Image with Cards
Lorem Ipsum
Ad enim id est aute in laborum.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident.
lorem ipsumDo reprehenderit exercitation eiusmod Lorem.
Lorem Ipsum
Ad enim id est aute in laborum.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident.
Lorem ipsumDo reprehenderit exercitation eiusmod Lorem.
2-Column Card with Image
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Light 2-Column card with icon | Left-aligned
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Light 2-Column card with icon | Right-aligned
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Light 2-Column card with icon on dark bg | Left-aligned
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Light 2-Column card with icon on dark bg | Right-aligned
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Dark 2-Column card with icon | Left-aligned
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Dark 2-Column card with icon with light blue bg | Right-aligned
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
2-Column Card with sticky image
Do reprehenderit exercitation eiusmod Lorem.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident.
Ad enim id est aute in laborum.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Ad enim id est aute in laborum.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Ad enim id est aute in laborum.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Ad enim id est aute in laborum.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
Ad enim id est aute in laborum.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Non elit elit non pariatur culpa consectetur consectetur exercitation id esse sunt. Incididunt dolore amet reprehenderit cupidatat excepteur irure deserunt quis tempor irure officia. Esse ex exercitation aliquip voluptate fugiat pariatur elit laborum anim adipisicing irure reprehenderit.
1
Numbered section with elevated list and image
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Ad enim:
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
2
Numbered section with elevated stats and 2-column cards with list and image
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
93%
Cupidatat in non aute do dolore ullamco esse in proident.
64%
Cupidatat in non aute do dolore ullamco esse in proident.
Quis cillum cupidatat:
Quis cillum cupidatat
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
3
Numbered section with divider and sub-section
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum.
Quis cillum cupidatat
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
90%
Cupidatat in non aute do dolore ullamco esse in proident.
73%
Cupidatat in non aute do dolore ullamco esse in proident.
Source: Lorem Ipsum
4
Numbered section with email template card
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Try this email:
Subject: Enter To Win the [[Company]] Story Contest
Hi [[Company]] team,
We know that the skills and perspectives each of you bring are unique — and we want to hear more about them.
That’s why we’re holding a story contest to collect your personal stories, work anecdotes, and company perspectives.
There’s not a specific prompt as long as the story is related to your career or our organization. The stories will be judged on their authenticity and how well they capture our company’s culture.
If you’re unsure where to start, here are a few prompts:
- How does [[Company]] fit into your goals in life?
- What steps led you to work here?
- What’s your favorite interaction with another employee?
- Which story best represents [[Company’s]] unique offerings?
Note: All submissions will be confidential unless you give us explicit permission to share your story with the wider company or potential candidates.
Submit your story via video by [[deadline]] to enter the competition. The winners will be announced by [[date]] and get [[optional prize]].
Looking forward to hearing your stories,
Thanks,
[[Your Name]]
5
Numbered section with 2-Column and email template card
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Quis cillum cupidatat laboris occaecat culpa veniam. Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Hi, [[Name]]
Congratulations on your promotion!
Since you’re moving up with the company, I thought you might want to share some insight for potential new employees at our [[Glassdoor/Indeed/etc.]] page.
We appreciate your honest thoughts, and your review could help others.
Thanks,
[[Your Name]]
6
Numbered section with elevated stats and “How to” elevated card
49%
Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
33%
Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum.
Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
5
Numbered card
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
2
Numbered card with elevated list
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Do reprehenderit exercitation
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
5
2-Column numbered card
Officia adipisicing eiusmod consequat eu excepteur pariatur proident commodo proident cillum. Cupidatat in non aute do dolore ullamco esse in proident. Do reprehenderit exercitation eiusmod Lorem.
Card With Elevated Header
Aute pariatur ex non minim ex velit adipisicing incididunt amet non laboris veniam non incididunt. Proident occaecat ea minim dolor minim in adipisicing elit do in culpa irure. Reprehenderit laborum ex consequat id.
Grouped Subsections
Aute pariatur ex non minim ex velit adipisicing incididunt amet non laboris veniam non incididunt. Proident occaecat ea minim dolor minim in adipisicing elit do in culpa irure. Reprehenderit laborum ex consequat id.
Grouped Subsections
Aute pariatur ex non minim ex velit adipisicing incididunt amet non laboris veniam non incididunt. Proident occaecat ea minim dolor minim in adipisicing elit do in culpa irure. Reprehenderit laborum ex consequat id.
Aute pariatur ex non minim ex velit adipisicing incididunt amet non laboris veniam non incididunt. Proident occaecat ea minim dolor minim in adipisicing elit do in culpa irure. Reprehenderit laborum ex consequat id.
Grouped Subsections
Aute pariatur ex non minim ex velit adipisicing incididunt amet non laboris veniam non incididunt. Proident occaecat ea minim dolor minim in adipisicing elit do in culpa irure. Reprehenderit laborum ex consequat id.