Gallery
Every reusable part, rendered live from the components the site ships. Atoms compose into blocks; blocks compose into bands; bands compose the homepage. The band set is what the homepage is built from — it renders the live-site snapshot, so these demos show real material.
Two parallel type scales. The promo scale sets airy, image-led layouts; the dense editorial scale sets the packed newsroom grid — same families, tighter rhythm.
styles/app.css headline-lead · -feature · -deck, band-label, row-meta. Drives every band.
band-label · 18→22px
Entertainment
headline-lead · 21→25px
സംസ്ഥാനത്തെ മുഴുവന് ജില്ലകളിലും മഴ മുന്നറിയിപ്പ്; 12 ജില്ലകളില് ഓറഞ്ച് അലര്ട്ട്,...
headline-feature · 19→22px
ജാതി സംവരണത്തിനെതിരെ മുറവിളി ഉയരുന്ന കാലത്ത് ഒരു ജാതി പടം
headline-deck · 15→16.5px
ചിപ്സ് പാക്കറ്റിലെ കളിപ്പാട്ടം വിഴുങ്ങിയ അഞ്ചുവയസുകാരന് ദാരുണാന്ത്യം
row-meta · 12px
styles/app.css hero / article-title-lg / article-title / body-small — the airier scale the older layouts use.
text-hero · 24→44px
ഓപ്പറേഷൻ തൂഫാൻ; ലഹരി വില്പന നടത്തിയ കട പൊലീസ് പൊളിച്ചു നീക്കി
article-title-lg · 21→30px
ഓപ്പറേഷൻ തൂഫാൻ; ലഹരി വില്പന നടത്തിയ കട പൊലീസ് പൊളിച്ചു നീക്കി
article-title · 14→18px
ഓപ്പറേഷൻ തൂഫാൻ; ലഹരി വില്പന നടത്തിയ കട പൊലീസ് പൊളിച്ചു നീക്കി
eyebrow / caption-text
Kerala
8:48 PM IST
components/home4/BandHeading.astro Section marker: label, hairline rule to the far edge, optional View all. Opens every band.
components/home4/ThumbRow.astro The rail workhorse. Fixed 72/88px thumb slot keeps every row in one vertical lane; metaBelow moves the meta under the headline.
components/home4/Art.astro Story artwork that never lies: renders the story's own image, or holds the frame with a neutral tint when none exists.
with image
no image published
components/ui/Kicker.astro Category eyebrow — the one place letter-spacing is allowed. Latin uppercase only.
components/ui/Badge.astro Status flags for breaking, live and exclusive lockups.
components/ui/MetaRow.astro Category + timestamp pair for card footers.
components/ui/SectionHeading.astro Malayalam block label with azure accent rule — the older sections' identity.
components/ui/Headline.astro The one heading primitive. size maps to exactly one type token — never set headline type ad hoc.
components/ui/Media.astro Aspect-ratio frame. Derives intrinsic width/height from the ratio; takes loading + fetchpriority for LCP art.
Story units built from atoms. Bands arrange these; section and story pages use them directly.
components/news/StoryCard.astro Image-top promo unit — the workhorse of grids.
components/news/StoryList.astro Rule-divided text rail of StoryRow units.
components/news/OverlayStory.astro Text-over-image lockup with scrim and optional badge.
components/news/StoryLink.astro Bare headline link, optionally bulleted — the densest unit available.
components/news/NumberedList.astro Ranked rail for most-read.
components/news/Timeline.astro Timestamped spine for live feeds. LeadPackage renders its own variant of this pattern.
components/news/PromoGrid.astro StoryCard grid at 2–4 columns.
4:41 PM
5:20 PM
1 hr
2 hr
Full-width homepage sections, each one a band heading over a lead, a card run and a rail. All sit on the site's 12-column grid, so they stack predictably against each other. The homepage is these six in the live site's order.
components/home4/LeadPackage.astro The hero band: a 5-column lead spanning two rows, with a trending-topics strip across columns 2+3 over the thumbed headline stack (4) and the live rail (3) — OnAirNow plus the timestamped feed.
പത്തനംതിട്ട, കണ്ണൂർ ജില്ലകളിലെ വിദ്യാഭ്യാസ സ്ഥാപനങ്ങൾക്കും ആലപ്പുഴ ജില്ലയിലെ രണ്ട് താലൂക്കുകളിലെ വിദ്യാഭ്യാസ സ്ഥാപനങ്ങൾക്കും തിങ്കളാഴ്ച അവധി പ്രഖ്യാപിച്ചിട്ടുണ്ട്.
6:00 PM
components/home4/ListBand.astro Latest-news feed: a two- or three-column run of rule-separated ThumbRows.
components/home4/ShelfBand.astro Editorial lead (image and text side by side on a tinted panel), a rule, three promo cards, and a rail closed by a rectangle ad.
components/home4/FeatureBand.astro Built around one tall feature: large image over a tinted caption panel, a narrow stack of two cards, and a deep rail.
components/home4/SplitBand.astro Mirrored split lead (text panel left, image right), a four-up row of bordered cards, and an optional rail of thumb and author rows.
Kerala
Kerala
Kerala
Kerala
components/home4/SplitBand.astro Omit rail and authors and the main column takes all 12 columns — how the World band runs.
components/home4/ProgramBand.astro One programme's shelf: latest episode as a large still, the rest of the run as a numbered playlist. For flagship shows, where the draw is the programme rather than a single story.
components/home4/OpinionBand.astro Text-forward strip for desks that publish without art — rule-led columns carrying only kicker and headline.
A video sub-system built from the same atoms. is the core still (play + duration); everything else composes it — landscape grids, the vertical reels rail, a cinematic hero, and an inline player.
components/news/TopVideosShelf.astro Full-bleed blue band of video cards. The Videos band on the homepage; cards open the shared modal.
components/news/VideoHero.astro Full-bleed cinematic still for video landing pages.
components/news/VideoCard.astro Landscape still + title + duration.
components/news/VideoThumb.astro The core still, at 16/9, 1/1 and 9/16.
components/news/ShortsRail.astro Horizontal rail of vertical reels.
components/news/VideoGrid.astro VideoCard grid at 2–4 columns.
components/news/VideoFeature.astro Watch module: player with an up-next rail.
components/news/VideoPlayer.astro Inline HTML5 player.
Nothing matches that filter.