Logos

The header displays a logo on wider screens and an icon on mobile. Both have light and dark variants that switch automatically with the theme.

Static override

Replace the default images by placing files with the same names in app/assets/images/layered_ui/ in your host app.

For icon overrides, see the icons page.
Note: The logo in the header is substituted for the icon on small width screens to conserve space.

Dynamic override

Inject a custom logo per request using content_for:

<% content_for :l_ui_logo_light do %>
  <%= image_tag @tenant.logo_light_url, alt: "", class: "l-ui-header__logo l-ui-header__logo--light" %>
<% end %>

<% content_for :l_ui_logo_dark do %>
  <%= image_tag @tenant.logo_dark_url, alt: "", class: "l-ui-header__logo l-ui-header__logo--dark" %>
<% end %>

Styling overrides

To adjust logo styling (e.g. size), override .l-ui-header__logo in layered_ui_overrides.css. An example is included as a comment in the Tier 3 section of that file.