This page contains all of the custom blocks built for the SEIS website and describes their usage.
Group Options
Set a Style to define how the Group’s width behaves. Default
lets the group go the fullwidth of the parent. To prevent a block from being full width, nest your block in a Group
and select the Content
style option. This will set the block to a max width of the content well and add gutters on devices smaller than a Desktop. Narrow Content
will make the Group span 75% of the Parent’s width on desktop & tablet only.
Group Style: Default
Span the entire page without gutters.
Group Style: Content
Prevents the Group block from spanning the full page. Also adds gutters and vertical margins. As you can see, this text will span the entire content well.
Group Style: Narrow Content
On desktop and tablet, it spans 75% of the parent block that holds it. Typically used as a nested block inside of another block. Create this by nesting two Group
blocks. Set the parent Group
block to Content Width
and the child to Narrow Width
.
Note: Do not nest two Content Width
blocks, it will create odd padding/spacing issues.
SEIS Masthead
A masthead block that typically goes at the top of a page. Options include a Background Type
that can be either an image
or a video
. Leave the background type set to none
to show a big, light blue box instead. In the sidebar there are two options for setting a Style. Select Dark
for white text overlayed on a dark background, Primary Light
for the reverse effect, or Secondary Light
for blue text over UCLA yellow background. When adding content, be sure to keep it short and simple – this block isn’t designed for more than a headline or sentence.
A Tradition of
Challenging Traditional Thinking
SEIS Submenu
This block will put a Submenu
on any page. First create your menu under the Appearance>Menus
section. Then select your menu in the dropdown to assign it to this block.
Note: The menu is designed to sit under a SEIS Masthead
and should not be place in a group. There’s no need to use the “Display Location” settings to make the menus appear in the dropdown.
SEIS Accordion
You can stack as many of these as you’d like. One on top of the other and they will auto-format on the front-end! Change the heading by clicking the accordion and entering your text into the Accordion Heading field. Drop any blocks you’d like into the content well. On the front-end, the content well slides open when the user clicks the heading.
Some content for this accordion
Left text
right text
Lorem ipsum dolore!
Alber Textman
SEIS Featured Story Card
This block is used for highlighting content and linking to deeper pages. It requires an image and some text. The text box can be either on the left (default) or right of the image – use the align setting while the block is highlighted to select the alignment option. In the sidebar there are three options for setting a Style. Select Dark
for white text overlayed on a dark background Primary Light
for the reverse effect, or Secondary Light
for blue text over UCLA yellow background. When adding content, be sure to keep it short and simple – this block isn’t designed for more than a headline or sentence.
Featured Story
UCLA Ed&IS students approach scholarship with an eye on the universal potential of evolving how we learn, teach and research.
Planning for Academic ContinuitySEIS Featured Story Card Alt
This block is used for highlighting content and linking to deeper pages. It requires an image and some text. The text box can be either on the left (default) or right of the image – use the align setting while the block is highlighted to select the alignment option. When adding content, be sure to keep it short and simple – this block isn’t designed for more than a headline or sentence.
Note: Do not nest this block in a Group
set to Content Width
Featured Story Alt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn moreSEIS Featured Story Banner
This block is used for highlighting content and linking to deeper pages. It is designed to span the fullwidth of the browser window; do not put it in a Group
. It requires an image and some text. The text box can be either on the left (default) or right of the image – use the align content setting while the block is highlighted to select the alignment option. When adding content, be sure to keep it short and simple – this block isn’t designed for more than a headline and/or sentence.
SEIS Spotlight Banner
This block is used for highlighting longer form content. It is designed to span the fullwidth of the browser window; do not put it in a Group
. It requires an image and some text. The text box can be either on the left (default) or right of the image – use the align content setting while the block is highlighted to select the alignment option. This block will grow in height as you add more content to the body. On desktop and tablet, the image area will grow taller or become shorter depending on the amount of content you add. The image area has a fixed width – depending on which Image Width
setting you choose, it will be narrow or wide.
Spotlight Banner
Some long-form content. Body Copy 20px, or 1.25em – “Through the partnership between the UCLA School of Education and Information Studies and the David Geffen School of Medicine, we seek to inspire innovative pedagogies and educational research that will positively inform teaching and learning in medical contexts. Uppermost in our minds is that medical education is engaged, it is interactive, and it is dynamic, whether conducted in the classroom or the bedside.
We hope to achieve these ideals by thinking afresh a physician’s role as a student, as a learner, and as a community-engaged partner in Los Angeles. Central to our work is also the ethic of social justice and how medical education research and pedagogy may alleviate long-standing health disparities in the communities we serve. We believe that our efforts in this partnership will also help us think through promising educational practices in nursing, dentistry and other allied health professions.”
SEIS Slideshow Banner
This block is used to create a slideshow. It is designed to span the fullwidth of the browser window; do not put it in a Group
. It requires an image and some text. Preferred image size is 572 x 572 pixels. Larger images will be masked to that size.
SEIS Header with Image
A large header block that shows a banner headline with an image in the background. The recommended image size is 1160×600 pixels. Select Dark for white text overlayed on a dark background, or Light for the reverse effect. When adding content, be sure to keep it short and simple – this block isn’t designed for more than a headline or sentence.
Department of Education
SEIS Button
This block is used to create a special, stylized button specifically used in the SEIS theme. Options include using different icons or none, and color variations set via the Style option.
Dark Button Style Button With Email Icon Button With No Icon Light Button StyleSEIS Read More
Use this block to toggle read more content. Initially the content will be hidden on the page. When the user clicks the Read more
button, the content slides in.
Some content for reading more
Person Card
Use this block to manually display a person or select one from the Faculty post type. If showing multiple people, use the Column block to organize them into rows. The Person Card block will adopt the width of its parent container. If putting them in the Column Block
, select the Content Gap
style in the styles menu – this will ensure each person is nice spaced.
Basic Card
Use to represents a discrete piece of content among a series of a common content types. This summary can contain a variety of content types, such as text, images, or buttons and links and can lead to more detailed information. This block will be as wide as the parent block that contains it. Put it inside a column block to create a series of rows.
Basic Block H3 Title
Basic block paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn moreBasic Block H3 Title
Basic block paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn moreBasic Block H3 Title
Basic block paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Learn moreInfo Card
Used to provide a brief snipped of information. Heading and either a summary or a list of related links is required. This block will be as wide as the parent block that contains it. Put it inside a column block to create a series of rows.
H3 Heading
With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…
Learn moreH3 Heading
With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…
Learn moreH3 Heading
With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…
Learn moreLatest News
This block has several options to customize the content it displays. The primary option is to choose from showing either the latest published news posts or blog posts. Select a category to display posts only from that category, or leave blank to show posts from all categories. Select the number of posts you would like to display. You can choose from a grid is based on 3 or 4 across for desktop – it is recommended to always enter a multiple of the number you pick to ensure the rows have equal numbers of posts.
Note: On the News page you will see one Featured Post. To set that, go to Posts > Post Settings
and select the news post you would like to feature. Only one post can be featured at a time.
UCLA’s Patricia Gándara Honored with Mexico’s Ohtli Award
Prestigious award recognizes those who have set a path for others, benefitting Mexican citizens and culture. Gándara’s contributions have furthered […]
Between a Rock and a Hard Place: Tensions Between Youth-serving Nonprofits & Philanthropy
Research by UCLA PhD candidate Abbie Cohen probes tensions between youth-serving education nonprofit organizations and philanthropic funders Abbie Cohen, a […]
Thuy Vo Dang Honored with UCLA Research Awards
Scholar of the Vietnamese diaspora and community archives receives Society of Hellman Fellows Award and social impact grant from the UCLA Center […]