Stock Price
Layout Variations
See how this plugin adapts across different mashup views. Each view shows a single instance to demonstrate how the layout responds to available space.
Full View
AAPL
Apple Inc.
+0.62%
Daily Change
$226,40
SPY
S&P 500 Index
+16.43%
Daily Change
$560,62
NVDA
NVIDIA Corporation
-2.87%
Daily Change
$128,50
Stock Prices
Stonks Demo (% Change)
<div class="layout layout--col gap--space-between">
<div class="grid">
<div class="col--span-2">
<div class="grid grid--cols-1">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--large" data-fit-value="true">AAPL</span>
<span class="label">Apple Inc.</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--large value--tnums" data-fit-value="true">+0.62%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
</div>
<div class="item col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--xxlarge value--tnums" data-fit-value="true">$226,40</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="col--span-2">
<div class="grid grid--cols-1">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--large" data-fit-value="true">SPY</span>
<span class="label">S&P 500 Index</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--large value--tnums" data-fit-value="true">+16.43%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
</div>
<div class="item col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--xxlarge value--tnums" data-fit-value="true">$560,62</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="col--span-2">
<div class="grid grid--cols-1">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--large" data-fit-value="true">NVDA</span>
<span class="label">NVIDIA Corporation</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--large value--tnums" data-fit-value="true">-2.87%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
</div>
<div class="item col--span-4">
<div class="meta"></div>
<div class="content">
<span class="value value--xxlarge value--tnums" data-fit-value="true">$128,50</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://trmnl.com/images/plugins/stock_price--render.svg">
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo (% Change)</span>
</div>Half Horizontal
AAPL
+0.62%
$226,40
SPY
+16.43%
$560,62
NVDA
-2.87%
$128,50
Stock Prices
Stonks Demo (% Change)
<div class="layout gap--space-between">
<div class="columns h-full">
<div class="column gap--space-between h-full">
<div class="grid">
<div class="item col--span-3">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base" data-fit-value="true">AAPL</span>
<span class="label">+0.62%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-fit-value="true">$226,40</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="item col--span-3">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base" data-fit-value="true">SPY</span>
<span class="label">+16.43%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-fit-value="true">$560,62</span>
</div>
</div>
</div>
</div>
<div class="column gap--space-between h-full">
<div class="grid">
<div class="item col--span-3">
<div class="meta"></div>
<div class="content">
<span class="value value--small lg:value--base" data-fit-value="true">NVDA</span>
<span class="label">-2.87%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-fit-value="true">$128,50</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://trmnl.com/images/plugins/stock_price--render.svg">
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo (% Change)</span>
</div>Half Vertical
AAPL
Apple Inc.
+0.62%
Daily Change
$226,40
SPY
S&P 500 Index
+16.43%
Daily Change
$560,62
NVDA
NVIDIA Corporation
-2.87%
Daily Change
$128,50
Stock Prices
Stonks Demo (% Change)
<div class="layout layout--col gap--space-between">
<div class="grid grid--cols-1">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base" data-fit-value="true">AAPL</span>
<span class="label">Apple Inc.</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-fit-value="true">+0.62%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--large lg:value--xlarge value--tnums" data-fit-value="true">$226,40</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-1">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base" data-fit-value="true">SPY</span>
<span class="label">S&P 500 Index</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-fit-value="true">+16.43%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--large lg:value--xlarge value--tnums" data-fit-value="true">$560,62</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-1">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base" data-fit-value="true">NVDA</span>
<span class="label">NVIDIA Corporation</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-fit-value="true">-2.87%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--large lg:value--xlarge value--tnums" data-fit-value="true">$128,50</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://trmnl.com/images/plugins/stock_price--render.svg">
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo (% Change)</span>
</div>Quadrant
AAPL
+0.62%
$226,40
SPY
+16.43%
$560,62
NVDA
-2.87%
$128,50
Stock Prices
Stonks Demo (% Change)
<div class="layout layout--col gap--space-between">
<div class="grid">
<div class="item col--span-3">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-fit-value="true">AAPL</span>
<span class="label">+0.62%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-fit-value="true">$226,40</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="item col--span-3">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-fit-value="true">SPY</span>
<span class="label">+16.43%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-fit-value="true">$560,62</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="item col--span-3">
<div class="meta"></div>
<div class="content">
<span class="value value--xsmall lg:value--base value--tnums" data-fit-value="true">NVDA</span>
<span class="label">-2.87%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta"></div>
<div class="content">
<span class="value lg:value--large value--tnums" data-fit-value="true">$128,50</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://trmnl.com/images/plugins/stock_price--render.svg">
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo (% Change)</span>
</div>