UX List - Classnames not matching

Hi all - I’m struggling with getting one of the UX List components to render. I see in the style sheet, there’s a class ux-list-item__secondary-content but in the docs the page shows secondary for the styles.

So I guess I’m probably missing something but I’m not sure what. Maybe I missed some configuration somewhere for the theme or css variables or something.

here’s what I’ve done:

// from main.ts
<!-- from component.html -->

        <ux-list type="two-line">
          <ux-list-item repeat.for="project of projects">
            <div class="list-content">
              <div class="secondary">${project.location}</div>
            List Item 2

And the list shows up very plain (not like the docs) like this:

Can anyone provide me with some tips on getting this working?

Edit 1: Here’s an example:

1 Like

Is this what you want https://gist.dumber.app/?gist=fcc36ca0a532c8a8cae721128739a092

Yep - after diving into the css a bit I found that worked for me as well. I just wasn’t sure if there was some “magic” in the css theming that is supposed to automatically convert the classes from what the docs were showing on the list docs.

So this might be something to fix in the UX either documentation or the code itself? I’d be happy to contribute if so.

Regarding UI/UX - my team is moving forward with a new project with Aurelia - so a general question for the community would be what UI framework would be a good place to start with? What do people typically recommend?

1 Like

We’ve had a several discussion about a UI framework for Aurelia. It’s never been one that get voted the most, probably depends on what you like.
@ben-girardet and @MaximBalaganskiy recently have been using UX extensively in their projects, let’s invite them to the chat.

@roemhildtg if you’re a Material Design fan - Google MDC bridge or UX. I’m obviously biased towards the bridge - you get the “true” Material Design from Google itself.


Awesome - thanks for the suggestion! I’ll take a look at both and give them a shot.

1 Like