Drupal Lite 8: Use Folwell Components

In Drupal Lite 8, Folwell Components are configured blocks that use the Folwell design system. There are 7 Folwell Components:

  • Folwell Tabs Wrapper
    • Tabs Wrappers are sometimes referred to as "responsive tabs". When a visitor clicks a tab, its content panel is displayed.
    • Each tab has a panel that can contain one or more content boxes.
    • A Tabs wrapper allows a lot of content to appear in a small part of the page.
    • In the image below, there are two tabs (Tab title 1, Tab title 2). The tab "Tab title 1" is active, and its content box is displayed.
      a tabs wrapper. the title 'the tabs section title' appears at the top. there are two tabs, and the first tab is active. the contents of the first tab are displayed.
  • Folwell Accordion
    • Accordions are sometimes referred to as "drawers." They allow visitors to click on a header, which then expands or contracts to reveal or hide the content within a drawer. Accordions can aid in creating pages that are shorter and require less scrolling.
    • Each Accordion header can contain a Table, a Text Box with optional header, or another Accordion.
    • There can be multiple items in a header, and an Accordion can contain multiple headers.
    • In the image below, there are two accordion headers. The first accordion header is opened, and there is a table and text box displayed. There is also an Expand All link at the top that will open all of the headers in the accordion.
      there are two accordion headers. The first accordion header is opened, and there is a table and text box displayed. There is also an Expand All link at the top that will open all of the headers in the accordion.
  • Folwell Callout
    • Callouts are stylized groupings of scannable text.
  • Folwell Image
    • Images add visual appeal to the content on your site, helping to grab viewer interest and attention. Common image file types are JPEG, PNG and GIF. Folwell offers four image size variations 100%, 50%, 33%, 20%.
      Note: the percentages refer to the size of the image in the section region, it is not resizing the image.
    • The image below shows two variants, both in the same region: 100% (which fills the width of the region), and 33% (which fills 1/3 of the region)
      two images with captions and photo credits. the first is 100%, filling the width of the region. The second is 33%, and only fills 1/3 of the region.
  • Folwell Overlay Slideshow
    • The Folwell Overlay Slideshow features full width photos with slide content in a gold overlay box.
  • Folwell Slideshow
    • The Folwell Slideshow features photos and content side by side.
  • Folwell Link List

Folwell Components can be added to a page either from the Edit form, or from Layout Builder. They have the same functionality, but slightly different interfaces.

Add a Folwell Component using the Edit form

  1. Log in to the site
  2. Create a new page
     --- OR ---
  3. Find the page
    1. Use the Content menu item in the admin menu
  4. Scroll down to the Folwell Components section
    the folwell components section of the edit form showing a drop-down selector and help text.
    1. Select one of the components from the drop-down menu
      1. Add Folwell Tabs Wrapper
      2. Add Folwell Accordion
      3. Add Folwell Callout
      4. Add Folwell Image
      5. Add Folwell Overlay Slideshow
      6. Add Folwell Slideshow
      7. Add Folwell Link List
    2. Enter the necessary information (see below)
  5. Select Save at the bottom of the form

Add a Folwell Component using the Layout Builder

  1. Log in to the site
  2. Select Content in the administrative menu at the top of the page
  3. Find the content in the list
  4. Select Edit in the Operations column
  5. Select the Layout tab
  6. Select +Add Block in the region where the Folwell Component will be placed. The Choose a Block sidebar is displayed.
  7. Select +Create Custom Block at the top of the sidebar
  8. Select Folwell Component from the list of inline blocks. The Configure Block palette is displayed.
  9. Enter a Title for the block.
    1. If you do not want the title to appear above the block, uncheck Display Title
  10. Select the Folwell Component from the list. The configure block palette expands showing options for the type of folwell component selected.
    1. Enter the necessary information (see below)
  11. Select Add Block. The configure block palette closes and layout builder is displayed.
  12. Select Save Layout at the top of the layout builder. Layout builder closes and the page is displayed.

Add Folwell Tabs Wrapper

  1. Select Add Folwell Tabs Panel.
  2. Enter the Tabs Section Title. This will appear above the tabs section.
  3. Select the Add Folwell Tabs Panel
    1. Add the Tab Title. This will appear on the tab.
  4. Select the Add Folwell Tabs Content. This will be the content of the tab.
  5. Enter the Tab Content.
    1. Multiple tab contents can be added to the tab panel. Select Add another item or Add Folwell Tab Content.
  6. Select Add Folwell Tabs Panel to add another tab to the layout.
  7. When finished, select the Save button.

Add Folwell Accordion

  1. Select Add Folwell Accordion. The Folwell Accordion section expands.
  2. Select Add Accordion Item. The Accordion Items section expands.
  3. Enter an Accordion Item Header.
    1. Best practice is to keep the header text relatively short.
  4. Select the type of Accordion Item content to add: Table, Text with optional header, Accordion

Table

Selecting Table will expand the Table section. Enter a Table Title, Table Caption, and the contents of the table.

Text With Optional Header

Selecting text with optional header will expand a new section of the form. Enter the Text Item Header, and Text Item Body.

Accordion

Selecting accordion will expand a new section. Enter the necessary information. Note: as of August 2019, a nested Accordion will not display properly on the published page.

Add Folwell Callout

  1. Select Add Folwell Callout. The Folwell Callout section expands.
  2. Select Add Media (optional). The Add Media module is displayed.
    1. Select an image from the image files on your site, or upload a new image using the Add File at the top of the module.
  3. Enter the Callout Text.
  4. Select a Callout Style. The callout style is applied to the callout text box
    1. The Horizontal style should always be used with an image.
    2. The Overlay style should always be used with an image.
  5. When finished, select the Save button

Add Folwell Image

  1. Select Add Folwell Image. The Folwell Image section expands.
  2. Use the selector to add an image.
    1. The options are 100%, 50%, 33%, 25%
    2. The percentages are not in relation to the actual size of the image, but of the size of the region on the page. A 33% image will be 1/3 of the region
  3.  Select Add Media.
    1. Select or upload an image.
  4.  Enter an Image Caption.
    1. The image caption will appear below the image and will be italicized.
  5. Enter a Photo Credit.
    1. The photo credit will appear below the image caption

Add Folwell Overlay Slideshow

  1. Select Add Folwell Overlay Slideshow. The slideshow section expands.
  2. Select Add Media in the slide image section. The Add Media dialog box is displayed.
    1. Select an image from the library, or upload a new image.
    2. Select Insert Selected. The add media box is closed.
  3. Enter the Overlay Content.
  4. Select the position of the Overlay Content.
  5. Select Add Overlay Slide to add another slide to the slideshow.
  6. When finished adding slides, select Save.

Add Folwell Slideshow

  1. Select Add Folwell Slideshow. The folwell slideshow section expands.
  2. Enter a Slideshow Header. This will be displayed above the slideshow. It is optional.
  3. Select Add Slide. The slide item section expands.
  4. Select Add Media. The add media palette is displayed.
    1. Select an image from the library, or upload a new image.
    2. Select Place at the bottom of the add media palette.
  5. Enter the Slide Content (optional). This will be displayed over the image.
  6. Enter a Slide Link URL.
  7. Enter Link Text. This text will be displayed when the cursor is over the slide.
  8. Add additional slides.
  9. Select Save when finished.

Add Folwell Link List

  1. Select Add Folwell Link List. The link list section expands.
  2. Enter a URL and Link Text.
  3. Select Add another item to add another link to the list.
  4. Select Save when finished.