Post Item
Definition
.post-item class will still work, until it is removed in a
later major version of Mosaic.
Post Item is a pattern to combining a badge, headline (linked), text summary and date, with an optional image. The summary is truncated to four lines of text, which inherently depends on screen width.
Multiple Post Item patterns can be combined in a list, using a Stack.
Description
Use the Post Item pattern to show dated content.
Examples
Minimum Post Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Si enim ita est, vide ne facinus facias, cum mori suadeas. Videamus animi partes, quarum est conspectus illustrior; Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Duo Reges: constructio interrete. Tu vero, inquam, ducas licet, si sequetur; Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim?
Bona autem corporis huic sunt, quod posterius posui, similiora. Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Idem iste, inquam, de voluptate quid sentit? Homines optimi non intellegunt totam rationem everti, si ita res se habeat. Quid Zeno? Ex rebus enim timiditas, non ex vocabulis nascitur. Paria sunt igitur. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Est, ut dicis, inquam. Quod autem principium officii quaerunt, melius quam Pyrrho; Quam ob rem tandem, inquit, non satisfacit? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret?
In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Quod autem ratione actum est, id officium appellamus. Respondeat totidem verbis. Aliter enim nosmet ipsos nosse non possumus. Totum genus hoc Zeno et qui ab eo sunt aut non potuerunt aut noluerunt, certe reliquerunt.
<div class="post-item stack stack-2">
<div class="post-item-badge">
<span class="badge badge-secondary">Article</span>
</div>
<div class="post-item-title">
<a href="#">
Call for Proposals – Collaborate with NaNDA on new Neighborhood Data
</a>
</div>
<div class="post-item-summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venio ad
inconstantiae crimen, ne saepius dicas me aberrare; Si enim ita est, vide
ne facinus facias, cum mori suadeas. Videamus animi partes, quarum est
conspectus illustrior; Quid in isto egregio tuo officio et tanta fide-sic
enim existimo-ad corpus refers? Duo Reges: constructio interrete. Tu vero,
inquam, ducas licet, si sequetur; Piso, familiaris noster, et alia multa
et hoc loco Stoicos irridebat: Quid enim?
</p>
<p>
Bona autem corporis huic sunt, quod posterius posui, similiora. Quod,
inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen
expetitur propter voluptatem. Idem iste, inquam, de voluptate quid sentit?
Homines optimi non intellegunt totam rationem everti, si ita res se
habeat. Quid Zeno? Ex rebus enim timiditas, non ex vocabulis nascitur.
Paria sunt igitur. Magni enim aestimabat pecuniam non modo non contra
leges, sed etiam legibus partam. Est, ut dicis, inquam. Quod autem
principium officii quaerunt, melius quam Pyrrho; Quam ob rem tandem,
inquit, non satisfacit? Quid enim me prohiberet Epicureum esse, si
probarem, quae ille diceret?
</p>
<p>
In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.
Quod autem ratione actum est, id officium appellamus. Respondeat totidem
verbis. Aliter enim nosmet ipsos nosse non possumus. Totum genus hoc Zeno
et qui ab eo sunt aut non potuerunt aut noluerunt, certe reliquerunt.
</p>
</div>
<div class="post-item-date">
<time datetime="2023-02-06">February 6, 2023</time>
</div>
</div>Post Item with Optional Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Si enim ita est, vide ne facinus facias, cum mori suadeas. Videamus animi partes, quarum est conspectus illustrior; Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Duo Reges: constructio interrete. Tu vero, inquam, ducas licet, si sequetur; Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim?
Bona autem corporis huic sunt, quod posterius posui, similiora. Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Idem iste, inquam, de voluptate quid sentit? Homines optimi non intellegunt totam rationem everti, si ita res se habeat. Quid Zeno? Ex rebus enim timiditas, non ex vocabulis nascitur. Paria sunt igitur. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Est, ut dicis, inquam. Quod autem principium officii quaerunt, melius quam Pyrrho; Quam ob rem tandem, inquit, non satisfacit? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret?
In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Quod autem ratione actum est, id officium appellamus. Respondeat totidem verbis. Aliter enim nosmet ipsos nosse non possumus. Totum genus hoc Zeno et qui ab eo sunt aut non potuerunt aut noluerunt, certe reliquerunt.
<div class="post-item stack stack-2">
<div class="post-item-badge">
<span class="badge badge-secondary">Article</span>
</div>
<div class="post-item-image">
<img src="https://placehold.co/128" alt="" />
</div>
<div class="post-item-title">
<a href="#">
Call for Proposals – Collaborate with NaNDA on new Neighborhood Data
</a>
</div>
<div class="post-item-summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venio ad
inconstantiae crimen, ne saepius dicas me aberrare; Si enim ita est, vide
ne facinus facias, cum mori suadeas. Videamus animi partes, quarum est
conspectus illustrior; Quid in isto egregio tuo officio et tanta fide-sic
enim existimo-ad corpus refers? Duo Reges: constructio interrete. Tu vero,
inquam, ducas licet, si sequetur; Piso, familiaris noster, et alia multa
et hoc loco Stoicos irridebat: Quid enim?
</p>
<p>
Bona autem corporis huic sunt, quod posterius posui, similiora. Quod,
inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen
expetitur propter voluptatem. Idem iste, inquam, de voluptate quid sentit?
Homines optimi non intellegunt totam rationem everti, si ita res se
habeat. Quid Zeno? Ex rebus enim timiditas, non ex vocabulis nascitur.
Paria sunt igitur. Magni enim aestimabat pecuniam non modo non contra
leges, sed etiam legibus partam. Est, ut dicis, inquam. Quod autem
principium officii quaerunt, melius quam Pyrrho; Quam ob rem tandem,
inquit, non satisfacit? Quid enim me prohiberet Epicureum esse, si
probarem, quae ille diceret?
</p>
<p>
In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.
Quod autem ratione actum est, id officium appellamus. Respondeat totidem
verbis. Aliter enim nosmet ipsos nosse non possumus. Totum genus hoc Zeno
et qui ab eo sunt aut non potuerunt aut noluerunt, certe reliquerunt.
</p>
</div>
<div class="post-item-date">
<time datetime="2023-02-06">February 6, 2023</time>
</div>
</div>Variables
Custom classes that add specific styling or architecture to elements.
.post-item.post-item-badge.post-item-title.post-item-image.post-item-date.post-item-summary
.post-item-summary uses the CSS custom property declaration --lines-clamped: 4 for the truncated text