Common Component Tabs 

As you look at many of the components when adding in content, you’ll see similar tabs across the top of the component. Tabs help provide organization to the component so you can dive into specific areas such as right, left, and background more quickly as opposed to lumping them all together in one long listing of fields.    


Below we’ll dive into four of the most frequently used tabs. As noted above, many components have similar elements - the variation occurs in how the content you input in these components gets styled for the end user.  


General Tab 

The General tab can contain one or multiple fields depending on which component you are using. The General tab provides the content that is relevant to the entire component content.  Below are some of the fields you’ll see in the General tab:

  • Eyebrow Title: Stylized intro text to the header. Will display above the Title field content listed below and left aligned. 
  • Title: Section header 
  • Description: Section Description 
  • URL*: URL for a button 
  • Link Text*: Text displayed in button instead of the URL above 


(*) Under these fields you’ll see a button to Add Another Item. You can add additional sets of both the URL and Link Text field, by clicking this button, to create additional hyperlinked buttons as necessary.  


The Eyebrow Title, Title and Description field content in the General tab will show at the top of the component and the URL and Link Text will show at the bottom of the component. If there are additional tabs where you insert content, those will show in-between the two.  


Left Tab 

The left tab will be where you add in the content that you want to display on the left side of the component. 


When you go into the left tab, you may see an option to Add Component. You can think of these as subcomponents within the component you're working within to allow you to customize the component to your content’s needs. This allows you to select to add in an Image Component, Video Component, Content Component, or Text Component to that side of the component. To select which component you want to add, select Add below that component. It’ll then ask you to fill out or upload the necessary information.  


If you do not see the option to select a component, there will be fields displayed already for you. Many of these fields will have the same names as the ones in the General tab, the only difference is the content you insert into these fields will only display on the left side of the component and between any content you put in the General tab.  


Right Tab 

The right tab is fairly the same as the left tab except it displays on the right side.  


One variation is if you use the 75/25 component, the right side provides different components options such as List Component, CTA Component, and Limited Text Component.  


Background Settings 

Many components have a Background Settings tab that lets you upload images, change background colors, and account for changing font colors for accessibility.

Learn more about Working with Background Colors and Images in Drupal.



Additional Component Tabs 

There are a few components that have tabs unique to that component. However, similar to the theme above, they follow a consistent experience.   


Tile Grid 

Within the Tile Grid component you’ll see a Tiles tab. This creates the tiles that display within that component. The first item to select is the number of columns, 2, 3, or 4, from the dropdown. This will determine if your tiles will show as 2, 3 or 4 in a row. Whether you select 2, 3, or 4, they’ll expand to span the entire width of the component.  


Then, similar to the fields and functionality outlined above, you can add in the tile information in the provided fields, and you can add additional tiles by clicking Add Tiles at the bottom of that component.  


Knowledge Base Documentation for Future Quick Reference: 


Profile List 

Within the Profile list component you’ll see a Profiles tab. This component allows you to stack multiple items like faculty and staff information, collaborator organizations, awardees, or any number of types of content. While the fields in this component are named Name, Role/Position, and Bio, the content you put in those fields does not have to be that specific type of information. Think more about these fields as Title, Subtitle, and Description. Additionally, you can add an image and button(s). 


You can add in more profiles by clicking the Add Profile button at the bottom of the component.  


Knowledge Base Documentation for Future Quick Reference: 


Accordion 

Within the Accordion component you’ll see an Accordion Items tab. The fields are similar to fields described above, the only difference is the display – this content displays the Accordion Items tab Title field in the visible part of the accordion and then the Accordion Items tab Description field displays in the portion you need to expand to see.  


And similarly, you can add additional accordions by clicking Add Accordion Component.  


Static Card Grid 

Within the Static Card Grid component you’ll see a Cards tab. The first option is to select a Title Size. This is the top line within the individual card(s). It can be small if you’re looking to put a few words, about 25 characters or less, or big if you’re inserting just three or four characters or numbers like a stat number.  


The cards will display up to four across. They don’t center, so if you have only 1, 2, or 3 they’ll align starting on the left. 


The rest of the fields within the Cards tab are similar to what has been previously outlined and similarly, you can add additional cards by clicking Add Card Component.   


CTAs Grid Component 

Within the CTAs Grid Component, or unabbreviated the Call-to-Action Grid component, you’ll see a CTAs items tab to create your call to actions. The Link Title Text field is the top line of larger text within the button, the Link Text field is what displays below the Link Title Text and can be a brief description; then the Link (Single) field is the URL you want the button to take people to when clicked.  


Social Links 

The social links component allows you to create links to the social media accounts you have for your site section. You add the link to your social account in the Link (Single) field and then select which social platform that link is for in the dropdown so it knows which icon to display for the link to the end user.  


You can then add more by clicking the Add Social Link button at the bottom of the component.  


Three Separate Components, Similar Functionality: Entity Reference, Headlines Grid, and People List Components

  • Entity Reference: The Entity Reference component creates a grid, similar to the CTAs Grid, based on existing published content in Drupal; displaying that webpage's Title and Short Description and linking to it. This allows you to display and link to other BSPH Drupal webpage content without rewriting that content. This is useful in instances where page titles or descriptions may change so you don’t have to update it in two locations when it does. For instance, if you wanted to create a button linking to an Academic Program page, in the Entity Reference field select the number of columns from the dropdown, and then under Reference Content click Select Content. Within the Title field in the popup that displays, type in the webpage title you are trying to reference and click Apply. Use quotes around your search query if it is a common phrase as the search will return webpages that use each word you search for, as opposed to the phrase, unless you use quotes.

    Once you’ve found the content you’re looking for, you can check the box under that item and at the bottom of the popup, click Select Content. What you see in the popup display for that item you select will be what displays on your webpage for that entity reference. Now if that webpage title or short description changes in the content you referenced, it’ll automatically updated on your webpage within the entity reference component.

  • Headlines Grid (Manual Selection): The Reference Articles tab in Headlines Grid (Manual Selection) component functions very similar to the Reference Content tab in the Entity Reference component described above except it only allows you to reference content built using the Article content type.

  • People list (Manual Selection): The Referenced People tab in the People list (Manual Selection) component functions very similar to the Reference Content tab in the Entity Reference component described above except it only allows you to reference faculty that are within our Faculty Directory. 



Caution About Component Tabs

While fields are made consistent for ease of use, it can be very easy to look at a field and think you're in one tab or component section and be in another. Please pay close attention to which tab you are in, and if that tab has multiple items like the tile or profile component, make sure you’re in the one you expect to be editing.  


This also goes for Background settings. Some components, like the Static Card Grid component, allow you to select the background color or image for the full component and also the background color for each individual card.