Post Item
Content
Overview
One entry in the blog index, set inside PostList (an ol whose entries are numbered by a CSS counter). Meta line, linked title, description, then a "Read more" link.
Live example
- Read more
7 minutes read
Learn how to build a semantic, accessible and interactive Card UI using HTML and CSS
Do you know how to build semantics and accessibles Interactive Cards using HTML and CSS? Do you know that Interactive Card can be simple and complex? Do you know what a stretched technique is? If the answer is no, read this post and learn how to build compliant Interactive Cards for your product!
- Read more
7 minutes read
Learn how to build a disclosure component using the native HTML details tag
A step-by-step guide to developing an expandable/collapsible component in a easy and quick way without the need to use JavaScript or WAI-ARIA, just using the HTML tag <details>. Natively, this tag will allow us to create an accessible disclosure element for sreen readers and keyboard. Finally, we are going to learn how to implement transitions with CSS.
Usage
- The meta line is
metainaccent: the date, a square dot, the reading time. Pass the date already formatted for the locale.dateTimeis the machine-readable one. - The number sits in the left gutter (
01,02) and is spoken as "1." through CSS alt text. Do not draw it as a pseudo-element on the list item or as text. - The title is a
card-title(1.5rem, 2.25rem frommd), underlined 3px on hover. The description ismuted-foreground. - The "Read more" link is
link-brutin mono capitals. Give it the post's title in anaria-labelso repeated links have distinct names. - Entries are separated by a 2px
borderline, withspace-10(space-12frommd) above and below each.
Accessibility
This section is still in progress.
Related
This section is still in progress.
References
This section is still in progress.