Difference between "Text" and "Typography" Components

Trying to figure out what’s the difference between Text and Typography Components. The Manual only has a description for the Text Component so far.

  • Formatting of Links seems not to be intended in the Typography Component.
  • And which component should I take to format a bulleted list?

It’s an older dev diary, but the video below explains a little more about what Typography is for!

Where have the Bullets gone?!

Seriously, why are bullets so difficult in modern CSS and HTML apps.

Why can’t it be an inline style for text and typography?

2 Likes

We may add this in the future, but we wanted to get the basic text editing right first.

One of the reasons we’ve held off is that you’ll need to style them, and everyone has a different idea on what a bulleted list should look like… it could get very complex, very quickly!

If you need a bulleted list on the page, you could use the flex component, or use a Custom Component and paste in some HTML/Tailwind.

<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>
<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>
<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>
1 Like

Lists with basic styling should not be difficult.

Screenshot 2025-02-21 at 9.51.17 AM

That’s all that is needed in the General Aa Inspector.

Lists are on our list to do, you can vote for them here…

https://elements.nolt.io/5

Very good, that is very instructive, thank you very much! I suggest that the video is also linked here in the manual:

@dan that is exactly what I did with a FLEX and it works really well. See below.

But the problem with this is that you then are forced to break your longform text into separate parts in order to insert the list. This makes it a lot more cumbersome, especially if you want to move the text to somewhere else.

But it is possible, just not as convenient.

That is an excellent example of why normal bullet points won’t work for a lot of users, everyone has a different idea on styling them.

It’s actually quite a tricky problem to solve and we want to do it right, it’s on the list, I just can’t say when we’ll tackle it.

I’m not sure any of our competition has a great solution to this either…

@dan This is one of the reasons I keep harping on Markdown, because you can easily create a bullet list in longform text. Albiet not with all the formatting options shown in this example. But at least it can be done.

I feel there is a case to be made for supporting a simple form of list in longform text. Then if a more stylish option is needed it can still be accomplished with the components offered by Elements.

1 Like

We can do this with the Typography, we’ve just not enabled it yet!

Yeah, I agree - I think that is the way to go!

2 Likes