Mga card

Base card

Isang bilog na 12-pixel na ibabaw sa background ng card, nakabalangkas ng manipis na linya at itinaas ng malambot na anino. Kapag hini-hover, kaunti pa itong itinataas. Ito ang shell na pinagtatayuan ng halos lahat ng ibang card.

<div class="card"> … </div>

Feed post

Ang card ng blog listing: ang totoong FeedPostCard component, dito may placeholder sa pwesto ng hero image. Sa desktop, ito ay thumbnail sa tabi ng pamagat, meta line, at dalawang-linyang buod; sa phone, lumiliit ito sa isang compact na row.

Ang buong card ay isang link, hindi isang title link na may hiwalay na “read more”. Ang hover ay magkasabay na nagtataas ng card at nag-be-berde sa pamagat.

Series hero card

Ang card ng kasalukuyang series sa blog home, ni-render nang live: hero art sa tabi ng pitch ng series, kasama ang progress bar ng nailathala-sa-kabuuan. Sa phone, nagpapatong-patong ito at nagkakaroon ng solid na View series na button.

23 bahagi · Patuloy — susunod na bahagi: Hul 20Isinusulat pa

React Native Module Federation

Bumuo ng federated React Native app mula sa simula gamit ang Module Federation at Re.Pack: runtime remotes, ang shared-singleton contract, at host shell na may hawak ng navigation.

5 sa 23 nai-publish naMagsimula sa unang bahagi→Susunod na part · Hul 20

Tingnan ang series

Series card

Ang card ng More-series shelf sa Blog home: art sa ibabaw ng bilang ng parts, pamagat at dalawang-linyang paglalarawan. Ang tunay na SeriesCard component, dito may placeholder sa art.

Related-post card

Ang card ng More-from-the-blog shelf na nagsasara ng post: larawan, petsa, pamagat, at ang buong surface ay iisang link. Ang tunay na RelatedCard component.

Author card

Ang bio card sa dulo ng bawat post: avatar, pangalan, bio, link sa profile. Ang tunay na AuthorCard component, naka-render nang live.

Warren de Leon

Software Engineering Manager. Pinakahuling pinamunuan ang Mobile Platform team sa Hargreaves Lansdown. Sumusulat tungkol sa engineering leadership, React Native, at pagbuo ng magagandang team.

Tingnan ang profile

Current-role card

Ang latest-role card ng home page: logo disc sa tabi ng kumpanya at role, may paglalarawan sa ibaba. Naka-render mula sa tunay na classes na may placeholder na content.

Icon link card

Isang base card na iisang link: Feather glyph at title sa head row, blurb sa ibaba. Sabay na nagiging berde ang icon at title kapag naka-hover. Ipinanganak bilang index card ng docs na ito at na-promote sa site — ang mga icon-card class sa ibabaw ng card.

CTA band

Ang nakagitnang closing band: may tint, may border, 16-pixel na kanto, maikling heading at isa o dalawang call to action, hanggang 640 pixels. Nagsasara ito ng home page at ng CV page — iisang implementation, ang mga cta-band class.

Prev / next tiles

Dalawang tinted tile sa paanan ng detail page: berdeng uppercase na direction label at title ng pupuntahan, naka-right-align ang next tile. Magkabahagi ang mga artikulo at company page sa mga pn-nav class; sa phone, nagsasalansan ang mga tile.

Ang home page ay bumubuo rin ng dalawang bespoke card mula sa mga pirasong ito: current-series card na may progress bar sa tabi ng pinakabagong post. Sa phone, kapwa sila nagbibigay-daan sa standard na feed rows.

Ang lead post at mga viewport

Ang pinakabagong post ay may mas malaking lead treatment, at ang buong feed ay nagbabago ng hugis bawat band: malaking lead card sa ibabaw ng mga compact na row sa phone, dalawang-column na grid sa tablet, mga thumbnail row na may sidebar sa desktop. Ang mga frame sa ibaba ay ang totoong blog page sa bawat lapad.

Ang mga frame sa ibaba ay ang totoong mga page na ni-render sa totoong lapad, naka-off ang scripts: kaya palaging light theme ang ipinapakita nila at walang analytics na tumatakbo sa loob.

Kailan gagamitin

Kung saan ito matatagpuan

Base: .card. Feed: .feed-post na may .feed-post-thumb, .feed-post-body, .feed-post-meta, .feed-post-title, .feed-post-desc.