Theme Elements: Organizational/Layout Elements

‹ See all elements

Element: Separator/Whitespace

Creates a delimiter/whitespace to separate elements

Styling

  • Horizontal Ruler Styling
    Here you can set the styling and size of the HR element
    • Default
    • Big Top and Bottom Margins
    • Fullwidth Separator
      • Section Top Shadow
        Display a small styling shadow at the top of the section
    • Whitespace
      • Height
        How much whitespace do you need?
    • Short Separator
      • Position
        Set the position of the short ruler
    • Custom
      • Icon
        Should an icon be displayed at the center?
      • Icon
        Select an icon below
      • Position
        Set the position of the short ruler
      • Border
      • Width
        Enter a custom width.
      • Top Margin in px
      • Bottom Margin in px
      • Custom Border Color
        Leave empty for default theme color
      • Custom Icon Color
        Leave empty for default theme color

Element: Tabs

Creates a tabbed content area

Content

  • Title
    This is the small title at the top of your notification.
  • Message
    This is the text that appears in your notification.
  • Button Icon
    Should an icon be displayed at the left side of the button
  • Button Icon
    Select an icon for your button below
  • Close Button
    Display a button that closes the notification when clicked.

Styling › Size

  • Box Size
    Choose the size of your box here

Styling › Colors

  • Message Colors
    Choose the color for your box here
    • Custom Color
      • Custom Background Color
        Select a custom background color for your notification here
      • Custom Font Color
        Select a custom font color for your notification here
    • Gradient Color
      • Background Gradient Direction
        Define the gradient direction for background of the element
      • Gradient Color 1
        Select the first color for the gradient.
      • Gradient Color 2
        Select the second color for the gradient.
      • Gradient Color 3
        Select an optional third color for the gradient.
      • Custom Font Color
        Select a custom font color for your notification here

Styling › Border

  • Border Style
    Choose the border style for your element here
  • Border Width
    Select your border width.
  • Border Color
    Select the border color for this element here.
  • Border Radius
    Select your border radius(e.g. 5px).

Styling › Box Shadow

  • Box Shadow
    Select to add a customized box shadow
  • Box Shadow Styling
    Set the shadow styling values, you can use em or px, negative values move in opposite direction.
  • Box Shadow Color
    Select a shadow color for this element here.

Advanced › Effects

  • Sonar/Pulsate Effect
    Select a sonar/pulsate effect for the element.
  • Sonar Shadow Color
    Select the color for the sonar shadow.
  • Sonar effect duration
    Select approx. length of one effect, larger value slows down
  • Expand Scale
    Select the expand value for the sonar effect
  • Element Opacity
    Select the opacity of the element when expanding

Content

  • Tab Title
    Enter the tab title here (Better keep it short)
  • Tab Icon
    Should an icon be displayed at the left side of the tab title?
  • Tab Content
    Enter some content here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Element: Accordion

Creates toggles or accordions (can be used for FAQ)

Content › Toggles

  • Add/Edit Toggles
    Here you can add, remove and edit the toggles you want to display.
  • Use as FAQ Page (SEO improvement)
    Select if content is used as FAQ and add schema.org markup to support Google Search.

Content › Behavior

  • Initial Open
    Enter the Number of the Accordion Item that should be open initially. Set to Zero if all should be close on page load
  • Behavior
    Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?
  • Sorting
    Display the toggle sorting menu? (You also need to add a number of tags to each toggle to make sorting possible)

Styling › Toggles Styling

  • Styling
    Select the styling of the toggles

Styling › Colors

  • Custom Font Color
    Select a custom font color.
  • Custom Background Color
    Select a custom background color.
  • Custom Border Color
    Select a custom border color.
  • Custom +/- Icon Color
    Select a custom color for the toggle icon.
  • Custom Font Color Current Toggle
    Select a custom font color for the current active toggle.
  • Custom +/- Icon Color Current Toggle
    Select a custom color for the current active toggle icon.
  • Title Bar Custom Background Color
    Select a custom background color.
  • Background Gradient Direction
    Define the gradient direction for background of the element
  • Gradient Color 1
    Select the first color for the gradient.
  • Gradient Color 2
    Select the second color for the gradient.
  • Gradient Color 3
    Select an optional third color for the gradient.
  • Custom Hover Font Color
    Select a custom hover font color.
  • Custom Hover Background Color
    Select a custom hover background color.
  • Custom Hover +/- Icon Color
    Select a custom hover color for the toggle icon.

Styling › Font Sizes

  • Toggle Font Sizes
    Select a custom font size for the toggle title.
  • Content Font Sizes
    Select a custom font size for the content.

Advanced › Toggle Titles

  • Toggle Title Tag (Theme Default is < p >)
    Select a html tag for the toggle titles of this element.
  • Custom CSS Class For Heading Tag
    Add a custom css class for the heading here.

Content

  • Toggle Title
    Enter the toggle title here (Better keep it short)
  • Toggle Content
    Enter some content here
  • Toggle Sorting Tags
    Enter any number of comma separated tags here.

Advanced

  • For Developers: Custom Tab ID
    Insert a custom ID for the element here.

Styling › Text Alignment

  • Vertical Alignment Title and Content
    Applies only for the vertical timeline.

Styling › Colors

  • Custom Milestone Icon Background Color
    Select a custom background color for the icon.

Advanced › Milestone Link

  • Milestone Link
    Do you want to apply a link to the milestone?
PreviousNext
12345

Our researchers identify problems, design policies, and elevate community-driven solutions to advance environmental equity and improve lives.

NEWS

At the Luskin Summit, environmental justice took center stage

From plastic pollution to extreme heat, Luskin Center for Innovation panelists examined community-driven solutions

New toolkit helps communities prepare for heat

New toolkit helps communities prepare for heat

New UCLA tool maps how home electrification could change energy bills across Los Angeles

The public platform enables users to compare household energy costs under likely electrification scenarios

Water, fire, and finance: building more resilient systems

UCLA-led convening highlights need for clearer roles, stronger coordination, and more equitable financing strategies

At the Luskin Summit, environmental justice took center stage

From plastic pollution to extreme heat, Luskin Center for Innovation panelists examined community-driven solutions

New toolkit helps communities prepare for heat

New toolkit helps communities prepare for heat

New UCLA tool maps how home electrification could change energy bills across Los Angeles

The public platform enables users to compare household energy costs under likely electrification scenarios

Water, fire, and finance: building more resilient systems

UCLA-led convening highlights need for clearer roles, stronger coordination, and more equitable financing strategies
More News

MEDIA COVERAGE

See More ›

RESEARCH PRIORITIES

Link to: Water

Advancing access to safe, reliable, and affordable water

Link to: Climate

Uplifting community-driven climate action

Link to: Heat

Informing cooling strategies for heat-resilient communities

Follow a manual added link

Ensuring Access to Clean Energy and Transportation

RESEARCH PRIORITIES

Link to: Water
Link to: Climate
Link to: Heat
Follow a manual added link
Link to: Clean Transportation
Link to: Fire Research Hub
Link to: Urban Greening
Link to: Current Projects

RESEARCH PRIORITIES

Current Projects

CLIMATE

Uplifting community-driven climate action

ENERGY

Guiding an equitable transition to a 100% clean energy future

HEAT

Informing cooling strategies for heat-resilient communities

TRANSPORTATION

Accelerating the transition to zero-emissions mobility

URBAN GREENING

Making public spaces more green, resilient, and accessible

WATER

Advancing access to safe, reliable, and affordable water

Fire Research Hub

Stay connected. Get our latest research in your inbox.

SUBSCRIBE

PUBLICATIONS

Building Heat Resilient Communities

Built Shade

The Los Angeles Residential Energy Transition Tool

Image to crop

A Toolkit for Local Planning, Decision-Making, & Action

May 2026
Image to crop

Why Regulatory Reform Is Needed to Reduce Outdoor Vulnerability to Extreme Heat in Los Angeles

May 2026
Image to crop
May 2026
More Publications

Element: Fullwidth Sub Menu

Display a sub menu

Content

  • Which kind of menu do you want to display
    Either use an existing menu, built in Appearance -> Menus or create a simple custom menu here

    • Use existing menu
      • Select menu to display
        You can create new menus in Appearance -> Menus
    • Build simple custom menu
      • Add/Edit submenu item text
        Here you can add, remove and edit the submenu item text
  • Menu Position
    Aligns the menu either to the left, the right or centers it
  • Sticky Submenu
    If checked the menu will stick at the top of the page once it touches it.

Content

  • Menu Text
    Enter the menu text here

Styling

  • Style
    Select the styling of your menu item

Advanced

  • Menu Link
    Apply a link to the menu text?
  • Open In New Window
    Select if you want to open the link in a new window and set additional SEO options
  • Custom Title Attribute
    Set a custom title attribute for the link (used as tooltip on hover by most browsers and by screen reader).