Product Card
A simple example of a product card
component
UI Components
component.html
Data Display
You can also [use slots](/docs/guides/templates/slots) to expose data in your component.
["component","getting-started"]
Example
Semantic UI
UI Framework
Docs
Learn
Examples
ctrl+k
Enter a search term above to see results...
Collapse
Categories
Framework
UI Components
Templates
Reactivity
Query
Utils
Interactive
Accordion
Context Menu
Drag Dot
Dynamic Table
Emoji Reactions
Packing List
Tabs
Data Display
Product Card
Spectrum Analyzer
Complex
Advanced Colors
Card Search
Form Builder
TodoMVC
Feedback
Loader
Progress Bar
Form Elements
Checkbox
Color Picker
Dropdown
Password Strength
Rating Slider
Search
Star Rating
Temperature Converter
Canvas
Advanced Balls
Ball Simulation
Fireworks
Solar System
Solar System 3D
SVG
Clock
UI Framework
Docs
Learn
Examples
Examples
Intro
Current Time
CDN
Standard
Components
Authoring
Reactivity
Embedding
Tailwind
Icon Libraries
Lifecycle
Counter
Kitchen Sink
On Created
Events
Event Binding
Event Data
Global Events
List Event Data
Subtemplate Events
Styling
Color Palette
Dynamic Breakpoints
Tailwind
Theme Preview
Settings
Basic Settings
Modifying Settings
Setting Types
Keybinding
Advanced Keys
Basic Keys
Comms
External Calls
Specs
Using Specs
Spec Helpers
Spec Data Context
Interactive
Accordion
Context Menu
Drag Dot
Dynamic Table
Emoji Reactions
Packing List
Tabs
Data Display
Product Card
Spectrum Analyzer
Complex
Advanced Colors
Card Search
Form Builder
TodoMVC
Feedback
Loader
Progress Bar
Form Elements
Checkbox
Color Picker
Dropdown
Password Strength
Rating Slider
Search
Star Rating
Temperature Converter
Canvas
Advanced Balls
Ball Simulation
Fireworks
Solar System
Solar System 3D
SVG
Clock
Match
Basic
Exact
Multiple Values
Conditionals
If
Else If
Nested
Rerender & Guard
Loops
Each
Each In
Each As
Each Index
Each Key
Each Else
Expressions
Basic Expressions
Basic Expressions
Data Context
Boolean Attr
Function References
Raw HTML
Whitespace Condensing
Expression Syntax
Semantic / Lisp Style
Javascript Style
Mixed Style
Syntax Showcase
Events
@event
Snippets
Snippets
Snippets Advanced
Subtemplates
Basic Subtemplates
Templates as Settings
Async
Async
Async Advanced
Helpers
Logical
Comparison
String
CSS
Array & Object
Date & Number
Reactivity
Logging
Custom Helpers
Introduction
Signals
Reactions
Flush
Using Reactions
Signals
Peek
Reactive Object
Version
Derived
Computed
Derived
Match
Reactions
First Run
Reactivity Sources
Stop Reaction
Flushing
After Flush
Automatic Flush
Schedule Flush
Controls
Guard
Nonreactive
Dependencies
Depend
hasDependents
Notify
Debugging
Tracing
Settings
Clone
Equality
Safety
Helpers
Clear
Decrement
Filter
Get Index
Get Item
Increment
Map
Mutate
Now
Push
Remove Index
Remove Item
Replace Item
Set Index
Set Index Property
Set Property
Splice
Toggle
Unshift
Advanced
Batch Updates
Birthday
Context
External Sync
Mutation Helpers
Performance
Setup
ESM Usage
Browser Usage
Custom Root
Custom Alias
Export Globals
Introduction
Chaining
Shadow DOM
Selectors
DOM Selectors
DOM Creation
Plugins / Behaviors
Plugin
Behavior
Behavior - Mutations
Standard Plugins
Attach
Tooltip
Transition
Components
.component()
.dataContext()
.initialize()
.setting()
.settings()
Attributes
.addAttr()
.addClass()
.attr()
.data()
.hasClass()
.removeAttr()
.removeClass()
.removeData()
.toggleClass()
Content
.getSlot()
.html()
.outerHTML()
.setSlot()
.text()
.textNode()
.value()
CSS
.computedStyle()
.css()
.cssVar()
Dimensions
.bounds()
.dimensions()
.height()
.innerHeight()
.innerWidth()
.intersects()
.naturalHeight()
.naturalWidth()
.outerHeight()
.outerWidth()
.pagePosition()
.position()
.scrollHeight()
.scrollLeft()
.scrollTop()
.scrollWidth()
.width()
Visibility
.clippingParent()
.hide()
.isInView()
.isVisible()
.naturalDisplay()
.offsetParent()
.positioningParent()
.show()
.toggle()
DOM Manipulation
.append()
.appendTo()
.clone()
.detach()
.insertAfter()
.insertBefore()
.prepend()
.prependTo()
.remove()
.reverse()
DOM Traversal
.children()
.closest()
.closestAll()
.contains()
.filter()
.find()
.indexOf()
.next()
.not()
.parent()
.prev()
.scrollParent()
.siblings()
Events
.blur()
.click()
.dispatchEvent()
.focus()
.intercept()
.off()
.on()
.on() Delegation
.on() Abort
.on() Callback
.one()
.onNext()
.ready()
.submit()
.trigger()
Iterators
.each()
.map()
Logical Operators
.end()
.eq()
.is()
.last()
.slice()
Utilities
.add()
.count()
.el()
.exists()
.first()
.get()
.index()
.prop()
Bytes
fromBase64
toBase64
Coercion
toBoolean
toDate
toInteger
toNumber
toString
Setup
Browser Usage
ESM Usage
Looping
each
asyncEach
asyncMap
Arrays
any
difference
filterEmpty
findIndex
first
firstMatch
flatten
groupBy
inArray
intersection
last
moveItem
moveToBack
moveToFront
range
remove
sequence
some
sortBy
sum
unique
uniqueItems
where
Objects
arrayFromObject
assignInPlace
deepExtend
detectChanges
elementKey
extend
filterObject
get
hasProperty
keyedPath
keys
mapObject
onlyKeys
pick
proxyObject
reverseKeys
set
trackReads
trackWrites
unset
values
weightedObjectSearch
Types
isArguments
isArray
isBinary
isBoolean
isClassInstance
isDOM
isEmpty
isFunction
isMap
isNode
isNumber
isObject
isPlainObject
isPromise
isSet
isString
Strings
camelToKebab
capitalize
capitalizeWords
escapeHTML
getArticle
humanize
joinWords
kebabToCamel
reverseString
tokenize
toTitleCase
truncate
unescapeHTML
Functions
Cache
debounce
debounce (async)
memoize
noop
throttle
throttle (async)
wait
wrapFunction
Colors
oklchToHex
oklchToRgb
CSS
adoptStylesheet
extractCSS
scopeStyles
HTML
indentHTML
indentLines
Browser
copyText
getIPAddress
getJSON
getKeyFromEvent
getText
idleCallback
openLink
Cloning
clone
deepFreeze
Crypto
generateID
getRandomSeed
hashCode
isValidID
parseID
Dates
formatDate
Debug
fatal
log
Environment
isCI
isClient
isDevelopment
isServer
Equality
isEqual
Numbers
roundDecimal
roundNumber
Regex
escapeRegExp
Return to main menu
Return to main menu
Semantic UI