If the entire area in red is clickable maybe except the favorite icon, I would call it HotelCard or PropertyCard.
I would assume a widget would be ideal if this is a dismissable card or something the user can add or remove at their own will.
This part is called a "Card".
It is used to as a compound for multiple elements that belong to one display or meaning.
Design parts are usually UI terms. UI is the User Interface while UX is the User Experience.
UI is visual, UX is theoreitcal meaning behind the UI.
To find out more about "Cards" feel free to check out more here:
I would avoid tooltips for lots of reasons. In your case the main reasons would be:
There would be no way for users to know how to reveal the content. They shouldn’t have to hover (and wait) for a tooltip to (maybe) show.
It wouldn’t work for people without a pointing device like a mouse or trackpad. They wouldn’t work for keyboard users, screen reader ...
First, change "Click above to...." To "Click below to explore...". This will let user know upfront, how to interpret next items and that new journey will start.
Convert, locked/unlocked text with icons to regular raised buttons. Enabled for unlocked and disabled for locked.
This will be easy for user to understand what is available and what is not.
I tried to redesign these
The goal is to make users aware that they are clickable. I used common style such as button, hyperlink and, color blocking.
These will make them easy to spot for the user and won't cause high cognitive load.
I also created a hierarchy about the options, the context and the information.
I hope this will help you.
Put your clickable text on a button. Make it look 3D with some simple highlights and shadows, like Windows 3.x or 9x. If there's one thing Microsoft did well in 1990s versions of Windows, it was making things look like they could be clicked.
Just look at how those buttons on Windows 3.11 scream "Click me!" Also note the disabled button in the File Manager ...