SEIS Block Guide (Block Demo Page)

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.

Minimum recommended image size: 1095 x 702 pixels

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 Continuity

SEIS 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

Recommended image size: 574 x 430 pixels

Featured Story Alt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn more

SEIS 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.

Recommended image size: 670 x 485 pixels

BANNER

FEATURED


Pritzker Center Report on Domestic Violence Cited by CalMatters

Read more

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.

Recommended image size: 575 x 485 pixels

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.

Recommended image size: 572 x 572 pixels

STUDENT SPOTLIGHT

Student Name One

Education and Social Transformation & Cognitive Science Minor

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta corrupti modi id culpa placeat ex alias est odit maiores eius dicta porro voluptates officiis, iure voluptatum aperiam veniam reiciendis beatae. Fugit, eveniet, voluptatum consectetur tenetur, sint hic cum a placeat molestiae reiciendis necessitatibus.

Read more
Recommended image size: 572 x 572 pixels

STUDENT SPOTLIGHT

Student Name Two

Education and Social Transformation & Cognitive Science Minor

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta corrupti modi id culpa placeat ex alias est odit maiores eius dicta porro voluptates officiis, iure voluptatum aperiam veniam reiciendis beatae. Fugit, eveniet, voluptatum consectetur tenetur, sint hic cum a placeat molestiae reiciendis necessitatibus.

Read more

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 Style

SEIS 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.

Minimum image size: 376 x 251 pixels

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 more
Minimum image size: 376 x 251 pixels

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 more
Minimum image size: 376 x 251 pixels

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 more

Info 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 more

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 more

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 more

Latest 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.

View all news & updates