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. Kapag walang artwork, minamarkahan ng feed post ang sarili ng data-no-thumb at bumabagsak sa isang column, para hindi tumabi ang body sa walang lamang image track.

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.

Talaan ng publikasyon

Ang siksik na kapatid ng feed post: isang manipis na hilera bawat post (mono na petsa, pamagat, serye, oras ng pagbabasa), nakapangkat sa ilalim ng mono na year marker. Ang feed card ay nagbebenta ng isang post; ang index ay nagpapatunay ng katawan ng akda, kaya walang artwork sa daloy. Sa pointer sa desktop na lapad, ang pag-hover sa isang hilera ay nagpapalutang ng art ng post bilang maliit na nakatagilid na preview; sa touch at reduced-motion, mga hilera lang. Isang implementasyon, ang mga roster class; tumatakbo ito sa about page at hindi kailanman pina-paginate.

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.

19 bahagi · Patuloy · susunod na bahagi: Ago 17Isinusulat 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.

9 sa 19 nai-publish naMagsimula sa unang bahagi→Susunod na part · Ago 17

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 nakasentrong pansarang banda: may tint, may border, 16-pixel na kanto, maikling heading at isa o dalawang call to action, hanggang 640 pixels. Mag-isa nitong sinasara ang CV page; ang home page ay nagsasara na may dalawa sa isang cta-band-pair grid: nakapatong sa maliliit na screen, magkatabi mula 900 pixels, tinanggal ang solong width cap para balanse ang pares.

Stat band

Isang mono na linya ng mga bilang sa pagitan ng dalawang manipis na linya: mga post, serye, minuto ng pagbabasa. Berdeng numero, muted na label. Bawat numero ay hinango mula sa content sa build time, hindi kailanman tinatype, kaya hindi maaaring lumihis ang banda sa aktwal na laman ng site.

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.