# Dev Dairy Ep33 - Component Categories

**URL:** <https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429>\
**Category:** Elements\
**Created:** [August 27, 2024, 10:01am UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429 "2024-08-27T10:01:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 27, 2024, 10:01am UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/1 "2024-08-27T10:01:39Z")

</div>

Hello again,

Later today we’ll be releasing Elements Beta 7. In this new build we’ve fixed a tonne of reported issues, removed Sections and reorganized the components into categories. I go over some of these changes in the dev diary video below.

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/6/b6d2cda8b2a303236ef15f6ed775acb9ce0fb89a.jpeg "Dev Diary Ep33 - Component Categories") ](https://www.youtube.com/watch?v=57SgvFq65AE)

After I recorded this video @ben pointed out that I could have used a “Card” component for the Sticky instead of putting a Container in a Container… I think it was his polite way of saying “you’re doing it wrong”. However, my take-a-away from this is that Elements is pretty darn flexible (and powerful), and there’s no single way to build the design you want 😝

_Pssst. We’ve also been working on part of a bigger feature that will enable us to do a lot of exciting things in the future… however, the first part wasn’t quite ready to show off today, so you’ll have to wait till next week for that one 🤓_

## Project Resource

- [Download Elements Sticky Note Project](https://www.realmacsoftware.com/downloads/elements/projects/sticky-note.zip)

## New Tutorial

Yesterday we also released our first Elements video tutorial, it was on building a [blurry background with a custom component](https://forums.realmacsoftware.com/t/element-tutorial-ep1-building-a-blurry-background-custom-component/44417) using TailwindCSS.

## Get The Beta

You can [sign-up here to be notified](https://www.realmacsoftware.com/rapidweaver/elements/) when the Elements beta is publicly available. If you’re interested in jointing the early Private Beta you can request to be added to the list [over in this thread](https://forums.realmacsoftware.com/t/request-elements-beta-access-here/43887).

Please note, we’re adding new users slowly to the private beta to enable us to manage all the feedback. If you’re already on the waiting list, just hang-tight, we will get to you soon!

## Feedback

Keep the feedback coming, and if you have any thoughts about today’s video please post them below.

See you next week 👋

Thanks,  
Dan & Team Realmac.

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [August 27, 2024, 10:21am UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/2 "2024-08-27T10:21:22Z")

</div>

I would think the button should be in content

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [August 27, 2024, 11:07am UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/3 "2024-08-27T11:07:06Z")

</div>

I have not yet watched the video to review the category list names. However, according to Google and the HTML specifications, a button is intended as a call to action. It is often misused as a text element. A text link should use the `<a>` tag.

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [August 27, 2024, 11:33am UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/4 "2024-08-27T11:33:15Z")

</div>

is it not content then the same as an image or paragraph???

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [August 27, 2024, 12:07pm UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/5 "2024-08-27T12:07:17Z")

</div>

If the list starts to get quite long could the categories be collapsed into single group mode like the properties? I can see it becoming unwieldy once more default items are added and when people start adding custom components it could be a real mess.

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [August 27, 2024, 12:24pm UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/6 "2024-08-27T12:24:11Z")

</div>

Think of content as something Google indexes in their database for displaying on their SERP (search engine results page). An image and text are indexed, a button is not indexed, in fact it gets in the way because the function is not designed for that purpose, it is designed to initiate an action. A text link or even an image link, is designed to deliver content. Perhaps these examples of the code will better describe how very different they are.

`<a href="https://www.example.com">Visit Example.com</a>`

`<a href="https://www.example.com"> <img src="https://www.example.com/image.jpg" alt="Description of the image"> </a>`

`<button onclick="window.location.href='https://www.example.com';">Go to Example.com</button>`

Maybe this video will help better than my words.

[![](https://img.youtube.com/vi/wv15W_b29bo/hqdefault.jpg "Links vs Buttons | AccessiBits") ](https://www.youtube.com/watch?v=wv15W_b29bo)

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [August 27, 2024, 12:47pm UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/7 "2024-08-27T12:47:41Z")

</div>

@Dan, regarding your question about the categories, my suggestion is to default to the actual usage and purpose of the component. (Yes, I also like “component” since that’s what [Tailwind](https://tailwindui.com/components) calls it.) Cards typically aren’t indexed because they usually don’t contain enough content. When they do have a lot of content, they’re essentially just text in a container with a background. So, I think you made the right call.

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [August 27, 2024, 3:33pm UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/8 "2024-08-27T15:33:11Z")

</div>

I think it’s best to think how users would view these ‘things’ not what the actual specs say about them. I would think button & horizontal line would be in Content group (as each of those only creates one basic type of thing) . Now card could be thought of as a arrangement/collection of elements together, so Layout might work well.

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [August 27, 2024, 3:53pm UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/9 "2024-08-27T15:53:03Z")

</div>

totally agree

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 27, 2024, 5:18pm UTC](https://forums.realmacsoftware.com/t/dev-dairy-ep33-component-categories/44429/10 "2024-08-27T17:18:53Z")

</div>

Having just installed 22877 and created a new page, I would agree with @Bill and @Godber that Button & Divider should be in Content and Card should be in Layout.
