Components Used for Layout

Components Let You Mix, Match, and Reuse

News, Page, and Group Info content types let you select components to add variety to your pages.

Each component is designed for a purpose which is reflected in the component name. You can mix and match to design the best page for your content.

Some components can automatically pull content from other pages, from social media, or from other websites like the 25Live campus calendar or Pioneers. Other components give you options to change their look by changing where images appear, adding borders or background colors, or changing how titles appear, for example.

Where to Use Components

Some components can be used throughout your page, while others look and work best when used full width.

Use Standard or Full Width

Best if Full Width

Using Components

Screen shot showing Components field set directly above Components below content full-width
  • Standard components are those added to the Components section and fit next to the side navigation.
  • Full-width components appear below the side navigation and stretch the full width of the content area. They are best for displaying large, clear images and can save users a lot of scrolling.

Not sure if you should be using a standard or full-width component? In general:

  • Add intro text or small amounts of content near the top of your page to Components.
     
  • When your content would appear below the side navigation on a wide browser, switch to adding components using Components below content (full width). 
    These will display below any side navigation.

Tips:

  • Avoid switching to full-width paragraphs too soon. If nothing appears beside your side navigation, your users may think it’s an error or miss the full-width content entirely.
  • Not all components are available both standard and full-width.

To add a component to your page:

  1. Select the component you want from the Component type field in either Components or Components below content (full width).
  2. Click Add Component. (Group Info does not require this step.)

Drupal will display the new component for you.

Tip:

  • Your screen may be focused towards the bottom of your new component. If you can't see all the fields, scroll up.

To remove a component:

  1. Scroll to the top of your component and look to the right.
  2. Click Remove. Drupal will remove most fields.
  3. Click Confirm Removal to remove the component.

Tip:

  • To remove a component that has already been saved to a page, select the arrow next to Edit or Collapse and click Remove.
  • If you click Remove in error, select the arrow next to Confirm Removal and click Restore. Drupal will restore that component.

You can rearrange components within the same section, but cannot move them between Components and Components below content (full width).

foursided arrow

Components normally show a four-sided arrow to the left of the component name. Click and hold an arrow to drag the component to a new location.

When you have large components that make it difficult to use the drag-and-drop technique, use row weights. Drupal uses the row weights to determine the order in which components display. Lighter (lower value) ones float to the top, while heavier (higher value) ones sink to the bottom.

  1. At the top of Components or Components below content (full width), click Show row weights.
  2. a dropdown box with the number zero
    Reset these for each component so they are in the order you want.
  3. Save the page to reset the display. When you edit the page again, components will show up in the new order.

We use cookies to enable essential services and functionality on our site, enhance your user experience, provide better service through personalized content, collect data on how visitors interact with our site, and enable advertising services.

To accept the use of cookies and continue on to the site, click "I Agree." For more information about our use of cookies and how to opt out, please refer to our website privacy policy.