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
Stock Prices
Stonks Demo
<div class="layout layout--col gap--space-between">
<div class="grid">
<div class="col--span-3">
<div class="grid grid--cols-1">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value" data-fit-value="true">AAPL</span>
<span class="label">Apple Inc.</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--small value--tnums" data-fit-value="true">+0.62%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
</div>
<div class="item col--span-7">
<div class="meta" />
<div class="content">
<span class="value value--xxlarge value--tnums" data-fit-value="true">€226,40</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid">
<div class="col--span-3">
<div class="grid grid--cols-1">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value" data-fit-value="true">SPY</span>
<span class="label">S&P 500 Index</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--small value--tnums" data-fit-value="true">+16.43%</span>
<span class="label">Daily Change</span>
</div>
</div>
</div>
</div>
<div class="item col--span-7">
<div class="meta" />
<div class="content">
<span class="value value--xxlarge value--tnums" data-fit-value="true">€560,62</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://usetrmnl.com/images/plugins/stock_price--render.svg" />
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo</span>
</div>Half Horizontal
AAPL
Apple Inc.
+0.62%
Daily Change
€226,40
SPY
S&P 500 Index
+16.43%
Daily Change
€560,62
Stock Prices
Stonks Demo
<div class="layout layout--row gap--space-between">
<div class="grid grid--cols-1">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value" data-fit-value="true">AAPL</span>
<span class="label">Apple Inc.</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--small 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 class="content">
<span class="value value--xlarge value--tnums" data-fit-value="true">€226,40</span>
</div>
</div>
</div>
<div class="grid grid--cols-1">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value" data-fit-value="true">SPY</span>
<span class="label">S&P 500 Index</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--small 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 class="content">
<span class="value value--xlarge value--tnums" data-fit-value="true">€560,62</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://usetrmnl.com/images/plugins/stock_price--render.svg" />
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo</span>
</div>Half Vertical
AAPL
Apple Inc.
+0.62%
Daily Change
€226,40
SPY
S&P 500 Index
+16.43%
Daily Change
€560,62
Stock Prices
Stonks Demo
<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 class="content">
<span class="value" data-fit-value="true">AAPL</span>
<span class="label">Apple Inc.</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--small 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 class="content">
<span class="value value--xlarge value--tnums" data-fit-value="true">€226,40</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid grid--cols-1">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta" />
<div class="content">
<span class="value" data-fit-value="true">SPY</span>
<span class="label">S&P 500 Index</span>
</div>
</div>
<div class="item">
<div class="meta" />
<div class="content">
<span class="value value--small 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 class="content">
<span class="value value--xlarge value--tnums" data-fit-value="true">€560,62</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://usetrmnl.com/images/plugins/stock_price--render.svg" />
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo</span>
</div>Quadrant
AAPL
+0.62%
€226,40
SPY
+16.43%
€560,62
Stock Prices
Stonks Demo
<div class="layout layout--col gap--space-between">
<div class="grid">
<div class="item col--span-3">
<div class="meta" />
<div class="content">
<span class="value value--small" data-fit-value="true">AAPL</span>
<span class="label">+0.62%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta" />
<div class="content">
<span class="value value--tnums" data-fit-value="true">€226,40</span>
</div>
</div>
</div>
<div class="divider" />
<div class="grid">
<div class="item col--span-3">
<div class="meta" />
<div class="content">
<span class="value value--small" data-fit-value="true">SPY</span>
<span class="label">+16.43%</span>
</div>
</div>
<div class="item col--span-6">
<div class="meta" />
<div class="content">
<span class="value value--tnums" data-fit-value="true">€560,62</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" alt="Stock Prices" src="https://usetrmnl.com/images/plugins/stock_price--render.svg" />
<span class="title">Stock Prices</span>
<span class="instance">Stonks Demo</span>
</div>