New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Semantic TCard (and others) #250

Open

iBobik opened this issue Apr 1, 2022 · 0 comments

iBobik commented Apr 1, 2022

Curently it produces non-semantic HTML:

<div class="border bg-white border-gray-200 rounded-2 shadow-sm ">
  <div class="border-b p-3 rounded-t border-gray-100">User profile</div>
  <div class="p-3 ">
      Im a full-stack software from Mexico City that likes Vue &amp; TailwindCSS.
  </div>
  <div class="border-t p-3 rounded-b border-gray-100">Copyright wharever 2020</div>
</div>

But I would like to have it better readable by screen readers and search engines, so better markup would be:

<aside class="border bg-white border-gray-200 rounded-2 shadow-sm ">
  <h2 class="border-b p-3 rounded-t border-gray-100">User profile</h2>
  <div class="p-3 ">
      Im a full-stack software from Mexico City that likes Vue &amp; TailwindCSS.
  </div>
  <footer class="border-t p-3 rounded-b border-gray-100">Copyright wharever 2020</footer>
</aside>

I am not sure if it is good idea to make it default, but it definitely be useful to have it configurable by props.

Is PR welcome?

The text was updated successfully, but these errors were encountered:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment